React Router v5路由代码迁移至v6版本（使用Routes与element标签）

核心调整点 #

• 移除v5版本的<Switch>组件，替换为v6要求的<Routes>作为路由容器
• 删除Route上的exact属性：v6默认采用精确路径匹配规则，不需要额外声明精确匹配
• 废弃Route标签内嵌套渲染组件的写法，所有待渲染的路由节点统一通过element属性传入
• 同一路由需要渲染多个并列组件时，用React Fragment（空标签<></>）包裹后传入element即可，符合标准JSX单根节点要求

适配v6后的完整App.js代码 #

// 从react-router-dom导入v6版本的路由核心组件
import { Routes, Route } from 'react-router-dom';
// 以下组件导入路径请替换为你项目的实际路径
import Header from './components/Header';
import Home from './pages/Home';
import Login from './pages/Login';
import Register from './pages/Register';

function App() {
  return (
    <div>
      <h2>JWT Authentication using JSON fake server</h2>
      <Routes>
        <Route 
          path="/" 
          element={
            <>
              <Header />
              <Home />
            </>
          } 
        />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
      </Routes>
    </div>
  );
}

export default App;

注意：使用前请先确认依赖版本，执行安装命令npm i react-router-dom@6 或者 yarn add react-router-dom@6 将react-router-dom升级到v6稳定版本再运行代码。

内容的提问来源于stack exchange，提问作者React-Dev