React-router-dom 无法与 Vite 配合使用

Question

我正在构建一个基于 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. 这是我的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"
}

那么有人可以解释一下为什么我的导航不起作用以及如何解决该问题吗？

Answer 1

npm install react-router-dom localforage 匹配排序器 排序依据

将此包用于 vite React 路由器。它对我有用，这里是链接 https://reactrouter.com/en/main/start/tutorial