React Router v5 vs v6 路由配置对比

React Router 是 React 中最常用的路由库，从 v5 到 v6 版本，发生了较大变化。本文对比 React Router v5 和 React Router v6 的配置方式，帮助开发者顺利迁移。

1. 安装依赖

React Router v5

npm install react-router-dom@5

React Router v6

npm install react-router-dom@latest

2. 基本路由配置

v5 版本 (使用 `Switch` 和 `component`)

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Home";
import About from "./About";function App() {return (<Router><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /></Switch></Router>);
}export default App;

v6 版本 (使用 `Routes` 和 `element`)

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Router>);
}export default App;

主要区别：

Switch 在 v6 中被 Routes 取代。
Route 不再使用 component={}，而是改为 element={<Component />}。
exact 默认生效，v6 无需手动添加。

3. 动态路由

v5 版本 (`match.params`)

import { useParams } from "react-router-dom";function User() {const { id } = useParams();return <h1>User ID: {id}</h1>;
}function App() {return (<Router><Switch><Route path="/user/:id" component={User} /></Switch></Router>);
}

v6 版本 (`useParams`)

function User() {const { id } = useParams();return <h1>User ID: {id}</h1>;
}function App() {return (<Router><Routes><Route path="/user/:id" element={<User />} /></Routes></Router>);
}

区别： v6 直接在 element 里传入组件，不使用 component={}。

4. 路由重定向

v5 版本 (`Redirect`)

import { Redirect } from "react-router-dom";function App() {return (<Router><Switch><Route exact path="/"><Redirect to="/home" /></Route><Route path="/home" component={Home} /></Switch></Router>);
}

v6 版本 (`Navigate`)

import { Navigate } from "react-router-dom";function App() {return (<Router><Routes><Route path="/" element={<Navigate to="/home" />} /><Route path="/home" element={<Home />} /></Routes></Router>);
}

区别： Redirect 在 v6 中被 Navigate 取代，且必须放在 element 里。

5. 路由守卫

v5 版本 (使用 `render`)

function PrivateRoute({ component: Component, ...rest }) {const isAuthenticated = false; // 示例return (<Route{...rest}render={(props) =>isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />}/>);
}

v6 版本 (使用 `Navigate`)

function PrivateRoute({ children }) {const isAuthenticated = false; // 示例return isAuthenticated ? children : <Navigate to="/login" />;
}function App() {return (<Router><Routes><Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} /><Route path="/login" element={<Login />} /></Routes></Router>);
}

区别：

v5 使用 render 方法返回不同组件。
v6 直接用 Navigate 进行跳转。

6. 嵌套路由

v5 版本 (`match.url`)

function Dashboard({ match }) {return (<div><h1>Dashboard</h1><Link to={`${match.url}/settings`}>Settings</Link><Switch><Route path={`${match.path}/settings`} component={Settings} /></Switch></div>);
}

v6 版本 (`Outlet`)

import { Outlet, Link } from "react-router-dom";function Dashboard() {return (<div><h1>Dashboard</h1><Link to="settings">Settings</Link><Outlet /></div>);
}function App() {return (<Router><Routes><Route path="dashboard" element={<Dashboard />}><Route path="settings" element={<Settings />} /></Route></Routes></Router>);
}

区别：

v6 使用 Outlet 代替 match.url 进行嵌套路由。

结论

功能	v5	v6
路由配置	`Switch` + `Route`	`Routes` + `Route`
动态路由	`match.params`	`useParams`
重定向	`Redirect`	`Navigate`
路由守卫	`render`	`Navigate` + 组件包裹
嵌套路由	`match.url`	`Outlet`