React-router-dom在Vite项目中报错：Redirect导出不存在

问题描述 #

基于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'

原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

依赖版本：

"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"
}

错误原因 #

react-router-dom从v6版本开始做了大量API变更，你的代码仍在使用v5及以前的写法：

• 移除了Redirect组件，改用Navigate组件实现重定向
• 移除了Switch组件，替换为Routes组件
• Route组件不再支持component属性，改用element属性传入JSX元素
• exact属性被移除，v6默认采用精确路径匹配
• 代码中存在拼写错误：exace应为exact（不过v6中该属性已无需使用）

修复步骤及代码 #

修改App.jsx，适配react-router-dom v6的API：

import { BrowserRouter as Router, Routes, Route, Navigate } 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 />
        {/* 用Routes替换原Switch组件 */}
        <Routes>
          {/* 用element传入JSX元素，替换原component属性 */}
          <Route path="/" element={<Home />} />
          {/* 修正拼写错误，同时移除exact属性 */}
          <Route path="/about-me" element={<AboutMe />} />
          <Route path="/portfolio" element={<Portfolio />} />
          <Route path="/socials" element={<Socials />} />
          {/* 用Navigate替换Redirect，replace属性模拟原Redirect的行为 */}
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </Router>
    </div>
  )
}

export default App

关键修改点说明： #

• 导入替换：将Switch改为Routes，Redirect改为Navigate
• 组件替换：用<Routes>包裹所有路由，替代原<Switch>
• Route写法变更：通过element={<组件名 />}指定路由渲染的内容，不再使用component={组件名}
• 重定向实现：用<Navigate to="/" replace />替代<Redirect to="/" />，replace属性会替换当前历史记录，避免回退时陷入循环
• 移除exact：v6中路由默认精确匹配，无需再手动添加exact属性
• 拼写修正：将exace改为exact（虽然v6中该属性已无用，但修正后更规范）

内容的提问来源于stack exchange，提问作者raffgiga