React-Router 中多层级嵌套路由的开发与应用-JavaScript中文网-JavaScript教程资源分享门户

React-Router 是 React 下常用的路由库，它提供了非常方便的路由配置和管理。在实际开发中，页面的层级结构往往是一个多层次的结构，这就需要用到多层级嵌套路由。本文将详细介绍 React-Router 中多层级嵌套路由的开发与应用，以及如何使用嵌套路由来组织复杂的页面结构。

React-Router 的基本概念

在使用 React-Router 之前，先了解一些基本的概念。

Router

Router 是整个路由体系的最外层容器，只有一个。

import { BrowserRouter as Router } from 'react-router-dom';

<Router>
  ...
</Router>

这里使用 BrowserRouter 创建一个 Router 容器。

Route

Route 是用来匹配 URL 和对应组件的。Route 组件可以配置路由的路径和对应的组件，每当 URL 匹配到对应的路径，就会渲染对应的组件。

import { Route } from 'react-router-dom';

<Route path="/home" component={Home} />

这里配置一个路径为 /home 的路由，渲染 Home 组件。

Switch

Switch 是 Route 组件的容器，用来将多个 Route 包裹起来，只渲染满足条件的第一个 Route 对应的组件。

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

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/user/:id" component={User} />
</Switch>

这里使用 Switch 将多个 Route 包裹起来，并配置了三个不同的路由。

Link

Link 是用来跳转到指定路由的组件，可以自动添加对应路由的 active 样式。

import { Link } from 'react-router-dom';

<Link to="/home">Home</Link>

这里创建一个跳转到 /home 路由的 Link。

多层级嵌套路由的实现

在 React-Router 中，多层级嵌套路由的实现非常简单。只需要在一个 Route 中嵌套另一个 Route 就可以实现多层级路由的嵌套，每个 Route 对应一个路由路径和对应的组件。

例如下面的路由结构：

-- -------------------- ---- -------
--------
  --------
    ------ ----- -------- ---------------- --
    ------ ------------ -----------------
      ------ ---------------- ---------------------- --
    --------
    ------ ------------- ----------------- --
  ---------
---------

在 /blog 路由路径下又嵌套了一个 /blog/:id 路由路径。当访问 /blog/1 路径时，会匹配到 /blog 路径下的 Route，然后在该 Route 内部继续匹配 /blog/:id 路径的 Route，最终渲染出对应的组件。

如何使用多层级嵌套路由

使用多层级嵌套路由可以方便地组织复杂的页面结构。例如，一个博客网站可能包含首页、博客列表和博客详情等页面。在 React-Router 中，可以使用多层级嵌套路由来实现这一结构。

首先，需要创建一个包含多个子路由的 Route，例如 /blog 路由。该路由下包含两个子路由，一个是 /blog 路径对应的组件 Blog，另一个是 /blog/:id 路径对应的组件 BlogDetail。

-- -------------------- ---- -------
--------
  --------
    ------ ----- -------- ---------------- --
    ------ ------------ -----------------
      ------ ---------------- ---------------------- --
    --------
    ------ ------------- ----------------- --
  ---------
---------

在 Blog 组件中，可以嵌套多个子组件，例如 BlogList 和 BlogTags。使用多层级嵌套路由可以很方便地在 Blog 组件中组织和管理这些子组件的代码。

function Blog() {
  return (
    <div>
      <BlogList />
      <BlogTags />
    </div>
  );
}

在 BlogList 组件中，可以渲染多个 BlogItem 组件。每个 BlogItem 组件需要包含一个链接，指向对应的博客详情页。这里可以直接使用 Link 组件，指定链接的路径为 /blog/:id。

-- -------------------- ---- -------
-------- ---------- ---- -- -
  ------ -
    ----
      ---------------- -- -
        --- --------------
          ----- -------------------------------------------
        -----
      ---
    -----
  --
-

在 BlogDetail 组件中，可以根据路由参数（即博客的 ID）来获取对应的博客数据，然后将数据渲染到页面上。

-- -------------------- ---- -------
-------- ------------ ----- -- -
  ----- - -- - - -------------
  ----- -------- - ----------------
  ------ -
    -----
      -------------------------
      -------------------------
    ------
  --
-

总结

React-Router 是 React 下常用的路由库，它提供了方便的路由配置和管理。在实际开发中，页面的层级结构往往是一个多层次的结构，这就需要用到多层级嵌套路由。本文详细介绍了 React-Router 中多层级嵌套路由的开发与应用，以及如何使用嵌套路由来组织复杂的页面结构。在实际开发中，需要灵活运用多层级嵌套路由来实现不同的页面结构。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647329a8968c7c53b00a996a