导航世界之旅：React Router 的嵌套路由与动态路由

2023-01-09 18:15:11

驾驭 React Router：解锁嵌套路由和动态路由的强大功能

在单页应用程序 (SPA) 开发的广阔天地里，React Router 扮演着指引导航世界的灯塔角色。它的核心特性——嵌套路由和动态路由——赋予开发人员构建复杂且用户友好的导航体验的非凡能力。

一、嵌套路由：理清导航脉络

嵌套路由让您按照层次结构组织路由，形成条理清晰、易于管理的导航架构。它为大型应用程序带来井然有序的优势，并简化了路由的添加、删除和修改。

在 React Router 中，<Switch> 和 <Route> 组件共同成就了嵌套路由的实现。<Switch> 负责匹配 URL 与定义的路由，并仅渲染首个匹配项的组件。而 <Route> 则用于定义路由及其对应的组件。通过嵌套 <Route> 组件，子路由便可诞生，并与父路由紧密相连。

二、动态路由：URL 的无限可能

动态路由让您根据 URL 中的参数渲染不同的组件，这在构建具有动态内容的应用程序中尤为实用，例如电商网站的产品页面或博客文章的详情页。

React Router 使用参数化路由路径来实现动态路由。例如，您可以定义 /product/:id 的路由，其中 :id 是一个动态参数。当用户访问 /product/123 时，React Router 会匹配此路由，并将 123 作为 props 传递给相应的组件。

三、嵌套路由和动态路由的实现指南

为了更深入地掌握嵌套路由和动态路由的实现，不妨参考以下分步指南：

安装 React Router
```
npm install react-router-dom
```

创建基本路由

import { BrowserRouter, Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
};

实现嵌套路由

import { BrowserRouter, Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About}>
          <Switch>
            <Route path="/about/team" component={Team} />
            <Route path="/about/history" component={History} />
          </Switch>
        </Route>
      </Switch>       
    </BrowserRouter>
  );
};

实现动态路由

import { BrowserRouter, Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/product/:id" component={Product} />
      </Switch>
    </BrowserRouter>
  );
};