重庆自助建站网站_工资卡app下载_aso优化哪家好_广告联盟接单赚钱平台

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

如果你是新项目，建议直接使用 React Router v6，如果是老项目，可以按需升级。