路由嵌套

在 React Router 中，路由嵌套是指一个路由内部包含另一个路由，从而形成层次化的 URL 结构。这种结构对于构建复杂的应用程序非常有用，因为它可以帮助你组织页面和组件之间的关系，并且保持 URL 的语义化。

React Router v5 版本的嵌套路由

在 v5 中，实现嵌套路由的方式是通过将子路由定义为父级路由组件的一部分。你可以直接在父组件中使用 <Route> 来定义子路由，或者通过渲染一个包含子路由的布局组件来实现。

示例：简单的嵌套路由

import React from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/users" component={Users} />
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

// 父级路由组件
function Users({ match }) {
  return (
    <div>
      <h2>Users</h2>
      <ul>
        <li>
          <Link to={`${match.url}/1`}>User 1</Link>
        </li>
        <li>
          <Link to={`${match.url}/2`}>User 2</Link>
        </li>
      </ul>

      {/* 子路由 */}
      <Switch>
        <Route path={`${match.path}/:userId`} component={UserProfile} />
        <Route
          path={match.path}
          render={() => <h3>Please select a user.</h3>}
        />
      </Switch>
    </div>
  );
}

// 子路由组件
function UserProfile({ match }) {
  return <h3>User Profile: {match.params.userId}</h3>;
}

export default App;

在这个例子中，Users 组件既是父级路由组件，也负责渲染其子路由。它使用了 match.url 和 match.path 来构造子路由的路径。

React Router v6 版本的嵌套路由

v6 对嵌套路由的支持有所改进，使得代码更加简洁。v6 中不再需要显式的 Switch 组件，因为新的 <Routes> 组件会自动选择最匹配的路由。此外，v6 引入了 element 属性用于指定要渲染的组件，而不是使用 component 或 render 函数。

示例：v6 的嵌套路由

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="users" element={<Users />}>
            {/* 嵌套路由 */}
            <Route path=":userId" element={<UserProfile />} />
            <Route index element={<h3>Please select a user.</h3>} />
          </Route>
        </Routes>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

// 父级路由组件
function Users() {
  return (
    <div>
      <h2>Users</h2>
      <ul>
        <li>
          <Link to="1">User 1</Link>
        </li>
        <li>
          <Link to="2">User 2</Link>
        </li>
      </ul>
    </div>
  );
}

// 子路由组件
function UserProfile({ params }) {
  const { userId } = params;
  return <h3>User Profile: {userId}</h3>;
}

export default App;

在 v6 中，<Route> 组件可以直接作为子元素嵌套在其他 <Route> 内部。如果一个路由有子路由，那么它的 element 属性应该是一个可以渲染这些子路由的组件。index 路由是新引入的概念，它表示当没有更具体的子路径匹配时，应该渲染的内容。

总结

无论是 React Router v5 还是 v6，嵌套路由都是创建复杂应用结构的重要工具。v5 通过父级组件中的 <Route> 定义子路由，而 v6 则简化了这一过程，允许直接嵌套 <Route> 并利用 element 属性和 index 路由提供更清晰的语法。