React Router v5 vs v6 路由配置对比

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