react 路由 三级路由

在 React 中，创建三级路由与创建二级路由类似。你可以使用 React Router 库来轻松地实现三级路由的嵌套。

下面是一个示例，演示如何创建三级路由：

首先，确保你已经安装了 React Router 库。可以使用以下命令来安装：

npm install react-router-dom

接下来，导入所需的模块：

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="/about">About</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/dashboard" component={Dashboard} />
        </Switch>
      </div>
    </Router>
  );
}

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

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Switch>
        <Route path="/dashboard/profile" component={Profile} />
        <Route path="/dashboard/settings" component={Settings} />
        <Route path="/dashboard/posts" component={Posts} />
      </Switch>
    </div>
  );
}

function Profile() {
  return <h3>Profile</h3>;
}

function Settings() {
  return <h3>Settings</h3>;
}

function Posts() {
  return (
    <div>
      <h3>Posts</h3>
      <Switch>
        <Route path="/dashboard/posts/create" component={CreatePost} />
        <Route path="/dashboard/posts/:id" component={PostDetails} />
      </Switch>
    </div>
  );
}

function CreatePost() {
  return <h4>Create a new post</h4>;
}

function PostDetails({ match }) {
  return <h4>Post ID: {match.params.id}</h4>;
}

在上面的示例中，我们创建了一个三级路由。在 `Dashboard` 组件中，我们创建了一个嵌套的 `Switch` 组件，以支持二级路由。然后，在 `Posts` 组件中，我们又创建了一个嵌套的 `Switch` 组件，以支持三级路由。

在 `Posts` 组件中，我们定义了 `/dashboard/posts/create` 和 `/dashboard/posts/:id` 这两个路径与对应的组件的映射关系。`:id` 是一个动态参数，在 `PostDetails` 组件中可以通过 `match.params.id` 来获取。

最后，将 `App` 组件渲染到 DOM 中：

ReactDOM.render(<App />, document.getElementById('root'));

通过以上代码，你就可以在你的应用程序中创建三级路由了。在导航菜单中点击链接将会渲染相应的组件。例如，点击 `/dashboard/posts/create` 将会显示 `CreatePost` 组件，点击 `/dashboard/posts/123` 将会显示 `PostDetails` 组件，并且动态传递参数 `123`。

希望这个示例能帮助你理解如何在 React 中创建三级路由。如有其他问题，请随时提问！