React-router-dom 不支持 Vite答案

【问题标题】：React-router-dom is not working with ViteReact-router-dom 不支持 Vite
【发布时间】：2023-02-22 03:07:14
【问题描述】：

我正在构建一个基于 React 和 Vite 的 Web 应用程序。我还使用 react-router-dom 创建到我的应用程序的导航，但是当我转到主页时，我在浏览器的控制台中遇到了这个错误：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=67b79ac4' does not provide an export named 'Redirect'

我正在尝试使用 react-router-dom 导航到我的 React 应用程序。这是我的App.jsx代码：

import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"

import Header from "./routes/Header/Header";
import Home from "./routes/Home/Home.jsx";
import AboutMe from "./routes/AboutMe/AboutMe.jsx";
import Portfolio from "./routes/Portfolio/Portfolio.jsx";
import Socials from "./routes/Socials/Socials.jsx";

function App() {

  return (
    <div className="App">
      <Router>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exace path="/about-me" component={AboutMe} />
          <Route exact path="/portfolio" component={Portfolio} />
          <Route exact path="/socials" component={Socials} />
          <Redirect to="/" />
        </Switch>
      </Router>
    </div>
  )
}

export default App

这是我在 package.json 文件中的所有依赖项：

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.5.0",
  "sass": "^1.57.0"
},
"devDependencies": {
  "@types/react": "^18.0.26",
  "@types/react-dom": "^18.0.9",
  "@vitejs/plugin-react": "^3.0.0",
  "vite": "^4.0.0"
}

那么有人可以向我解释为什么我的导航不起作用，我该如何解决这个问题？

【问题讨论】：

您正在使用 RR v5 及以下版本的代码，但您已经安装了 v6。 RR 升级到 v6 后变化很大。您需要使用a look at the upgrade documentation 对您的代码进行修复。
看起来 Vite 正在尝试导入模块的特定版本，/node_modules/.vite/deps/react-router-dom.js?v=67b79ac4，其中不包含 Redirect 导出。

标签： javascript reactjs react-router-dom vite

【解决方案1】：

好问题可能与 <路线加倍path="/about-me" component={AboutMe} /> 可能会尝试将其更改为精确。希望这可以帮助。

【讨论】：

【解决方案2】：

npm 安装 react-router-dom localforage match-sorter sort-by

将这个包用于 vite react 路由器。这对我有用

从 'react-router-dom' 导入 { BrowserRouter, Route, Routes };

【讨论】：