React Router中Link标签跳转异常问题求助

问题原因 #

你的代码使用了Switch组件和旧版Route写法，但当前安装的应该是react-router-dom v6版本——v6已移除Switch组件，改用Routes，同时Route不再支持将组件作为子元素传入，必须通过element属性传递组件。这导致路由匹配逻辑失效，URL变化但页面内容无法更新。

解决方案 #

1. 确认react-router-dom版本 #

执行命令查看当前版本：

npm list react-router-dom

若版本号以6.x.x开头，按以下步骤修改代码。

2. 修改App.js中的路由代码 #

• 导入Routes替代Switch
• 将Route的子组件写法改为element属性传递

修改后的App.js关键部分：

import {
  BrowserRouter as Router,
  Routes, // 替换Switch为Routes
  Route,
} from "react-router-dom";

// ...其他代码不变

return (
  <>
    <Router>
      <Header title="My Todo App" searchBar={false} />
      <Routes> {/* 用Routes替代原Switch */}
        <Route exact path="/" element={ // 通过element属性传递组件内容
          <>
            <AddTodo addTodo={addTodo} />
            <Todos todos={TodosList} onDelete={onDelete} />
          </>
        } />
        <Route exact path="/about" element={<About />} /> {/* 同样修改About路由 */}
      </Routes>
      <Footer />
    </Router>
  </>
);

3. 额外检查点 #

• 确保所有Route都使用element属性传递组件，不要混合旧写法
• 确认Header组件中Link的导入路径正确（你的代码这部分没问题）

改动说明 #

react-router-dom v6对路由系统做了重大重构：

• Routes替代Switch，提供更精准的路由匹配逻辑
• Route的element属性成为唯一传递组件的方式，子元素写法被废弃
• 新增了Outlet等组件，但你的场景暂时不需要用到

修改后重启项目，点击Link即可正常跳转页面。

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