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，如果是老項目，可以按需升級。