React Router 5 完整指南

太过爱你忘了你带给我的痛 2022-10-14 00:48 167阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![d15b59dac639909f66485d0de54a52f8.png][]

# 来源：vortesnail #

#  #

https://juejin.cn/post/6966242922278682632

> 最近在搭建自己的网站时，以前一直被自己认为写起来很简单的路由狠狠地给了我一巴掌，我既然怎么也想不到该怎么去合理地设计路由，痛定思痛，阅读了很多文章及官方文档，过程中也读到了这一篇很好的基础性文章，想翻译下来向大家分享下！同时，文中一些没讲到点上的，我都会进行补充，欢迎大家阅读与留言！
> 
> 另外，Twitter 已经私信给原作者，得到了翻译许可！

React Router 是 React 社区最受欢迎的路由库，当你需要在一个有多个页面的 React 应用程序中根据 URL 来导航到对应的页面时，就可以使用 React Router 来处理这个问题，它会使你的应用的 UI 和 URL 保持同步。

本教程将会向你介绍 React Router 5 以及你可以利用它而做到的一大堆事情。

## 介绍 ##

我们都知道 React 是一个用于创建在客户端进行渲染单页应用（SPA）的流行库，在一个 SPA 中可能有多个视图（也可以叫页面），但是与传统的多页应用程序不同的是，浏览这些页面时不会导致整个页面被重新加载。我们希望的是这些页面能够在当前页面中进行内联渲染，当然了，如果我们习惯了多页应用程序，那么希望 SPA 中也要具有以下的功能：

*  每个页面都应该有一个唯一指定该页面的 URL，这是为了能让用户可以将 URL 加入书签或直接输入浏览器而访问，比如 `www.example.com/products`。
 *  点击浏览器的后腿和前进按钮都应该如其如期工作。
 *  动态生成的嵌套页面最好也有一个自己的 URL，比如 `www.example.com/products/shoes/101` ，其中 `101` 是产品 ID。

路由是使浏览器的 URL 与页面上正在展示的页面保持同步的过程。React Router 让你以声明的方式处理路由，声明式路由方法允许你控制应用程序中的数据流，基本的使用方式就像下面一样简单：

<Route path="/about">
      <About />
    </Route>
    复制代码

这里简单提一下**声明式路由**和**函数式路由**分别长啥样：

*  声明式：`<NavLink to='/products' />` 。
 *  函数式：`histor.push('/products')` 。

你可以把 `<Route>` 组件放在任何你想渲染路由的地方，因为 `<Route>` ，`<Link>` 以及其它 React Router 的 APIs 都只是组件而已，所以你可以很容易地在 React 中启动和运行路由。

⚠️ 注意：有一个普遍的误解，认为 React Router 是由 Facebook 开发的官方路由解决方案。实际上，它只是一个第三方库，但因其设计和简单性而广受欢迎。

## 概览 ##

本教程将会分为几个小节，首先我们会使用 npm 来安装 React 和 React Router，接着就直接介绍 React Router 的基础知识。你会看到根据不同知识点而写的不同的代码演示，本教程中涉及的例子有：

*  基本的导航路由
 *  嵌套路由
 *  带路径参数的嵌套路由
 *  权限路由

所有与构建这些路由有关的概念都将在此过程中讨论。另外，该项目的全部代码可在 GitHub repo 上找到。 现在就让我们搞起来吧！

## 安装 React Router ##

请保证你电脑上安装了 `node` 和 `npm` ，然后利用 create-react-app 来创建一个新的 React 项目，我们直接使用 `npx` 来进行项目的新建：

npx create-react-app react-router-demo
    复制代码

> `npx` 可以使你不需要全局安装 create-react-app 就能创建 cra 项目。

接下来切换到该项目目录下：

cd react-router-demo
    复制代码

React Router 库包含三个包：react-router、react-router-dom 和 react-router-native 。路由操作相关的核心包是 `react-router`，而其他两个是特定环境下使用的。如果你正在开发一个 web 应用，你应该使用 `react-router-dom`，如果你在使用 React Native 开发移动应用，则应该使用 `react-router-native`。 使用 npm 来安装 `react-router-dom`：

npm install react-router-dom
    复制代码

然后执行以下命令来启动本地服务：

npm run start
    复制代码

好了，你现在已经有了一个安装了 React Router 的 React 应用，你可以在 http://localhost:3000/ 查看该应用的运行情况了。

## React Router 基础知识 ##

现在让我们熟悉一下 React Router 的基础知识，为了做到这一点，我们将制作一个有三个独立页面的应用程序：Home，Category 和 Products。

### `Router` 组件 ###

我们需要做的第一件事是将我们的 `<App>` 组件包裹在一个 `<Router>` 组件中（由 React Router 提供）。由于我们正在建立的是一个基于浏览器的 web 应用程序，我们可以使用 React Router API 中的两种类型的路由：

*  BrowserRouter
 *  HashRouter

两者主要区别在于他们创建的 URL 上：

// <BrowserRouter>
    http://example.com/about
    // <HashRouter>
    http://example.com/#/about
    复制代码

`<BrowserRouter>` 在两者中会更受欢迎些，因为它使用的是 HTML5 History API 来保持应用的页面与 URL 同步，而 `<HashRouter>` 则使用的是 URL 的哈希部分（`window.location.hash`）。如果你的代码运行在不支持 `History API` 的传统浏览器上，你应该使用 `<HashRouter>` ，否则 `<BrowserRouter>` 对于大多数情况来说是更好的选择。

导入 `BrowserRouter` 组件并用其包裹 `<App>` 组件：

// src/index.js
    
    import React from "react";
    import ReactDOM from "react-dom";
    import App from "./App";
    import { BrowserRouter as Router } from "react-router-dom";
    
    ReactDOM.render(
      <Router>
        <App />
      </Router>,
      document.getElementById("root")
    );
    复制代码

在上面代码中，我们为整个 `<App>` 组件创建了一个 `history` 实例，等会向大家解释这意味着什么。

⚠️ 为了能让大家更加明白这两者有啥区别，我会在下面做一个简短的说明。

### `<BrowserRouter>` 和 `<HashRouter>` 区别 ###

#### BrowserRouter： ####

`BrowserRouter` 要求服务端对发送的不同的 URL 都要返回对应的 HTML，比如说现在有如下两个 URL 发送 GET 请求到服务端：

http://example.com/home http://example.com/about
    复制代码

那么这个时候服务端拿到的是完整的 URL，这时候服务端就必须分别对 `/home` 和 `/about` 做处理并返回相应的 HTML 来给到客户端渲染。这个带来的影响就是，如果你切换到某个服务端没有做相应处理的页面路由，比如：

http://example.com/article
    复制代码

如果你在 SPA 中写了这部分路由要渲染的页面，在页面无刷新情况下跳转是没啥问题的。但是如果你直接在此路由下进行页面的**刷新**，就会得到一个 404。

#### HashRouter ####

`HashRouter` 在 URL 中使用哈希符号（`#`）来使服务端忽略 `#` 后面所有的 URL 内容，比如你在浏览器地址栏中直接输入以下 URL：

http://example.com/#/home http://example.com/#/about
    复制代码

服务端拿到的只会是 `http://example.com/` ，这样服务端只需要对这个路由做处理并返回 HTML，然后后面的路由 `/home` 或 `/about` 将全部交给客户端（也就是我们的 SPA 应用）来处理并渲染对应的页面。所以你在任意的路由进行页面的**刷新**都不会是 404。

### History 的小知识 ###

> `history` 这个库可以让你在 JavaScript 运行的任何地方都能轻松地管理回话历史，`history` 对象抽象化了各个环境中的差异，并提供了最简单易用的的 API 来给你管理历史堆栈、导航，并保持会话之间的持久化状态。— React Training 文档

每个 `<Router>` 组件都会创建一个 `history` 对象，它记录了当前的位置（`history.location`），还记录了堆栈中以前的位置。在当前位置发生变化时，页面会被重新渲染，于是你就有一种导航跳转的感觉。

那么如何改变当前的位置呢？也就是说如何做到**导航跳转**呢？这时候 `history` 的作用就来了，这个对象暴露了一些方法，比如 `history.push` 和 `history.replace` ，它们就可以拿来处理上面的问题。

当你点击一个 `<Link>` 组件时，`history.push` 就会被调用，而当你使用一个 `<Redirect>` 组件时，`history.replace` 就会被调用。其它的方法比如 `history.goBack` 和 `history.goForward` 可以用来在历史堆栈中回溯或前进。

### `Link` 和 `Route` 组件 ###

可以说 `<Route>` 组件是 React Router 中最重要的组件了，如果当前的位置与路由的路径匹配，就会渲染对应的 UI。理想情况下，`<Route>` 组件应该有一个名为 `path` 的属性，如果路径名称与当前位置匹配，它就会被渲染。

`<Link>` 组件被用来在页面之间进行导航，它其实就是 HTML 中的 `<a>` 标签的上层封装，不过在其源码中使用 `event.preventDefault` 禁止了其默认行为，然后使用 history API 自己实现了跳转。我们都知道，如果使用 `<a>` 标签去进行导航的话，整个页面都会被刷新，这是我们不希望看到的，当然，跳转到首页这种行为我倒是蛮喜欢用 `<a>` 标签的～

所以我们使用 `<Link>` 组件来导航到一个目标 URL，可以在不刷新页面的情况下重新渲染页面。 现在我们已经知道了所有要完成我们的 APP 所需要的知识，接着更新 `src/App.js` ，如下所示：

import React from "react";
    import { Link, Route, Switch } from "react-router-dom";
    
    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    );
    
    const Category = () => (
      <div>
        <h2>Category</h2>
      </div>
    );
    
    const Products = () => (
      <div>
        <h2>Products</h2>
      </div>
    );
    
    export default function App() {
      return (
        <div>
          <nav className="navbar navbar-light">
            <ul className="nav navbar-nav">
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/category">Category</Link>
              </li>
              <li>
                <Link to="/products">Products</Link>
              </li>
            </ul>
          </nav>
          {/* 如果当前路径与 path 匹配就会渲染对应的组件 */}
          <Route path="/">
            <Home />
          </Route>
          <Route path="/category">
            <Category />
          </Route>
          <Route path="/products">
            <Products />
          </Route>
        </div>
      );
    }
    复制代码

在上面的 `App.js` 中我们定义了三个组件分别为 `Home` 、`Category` 和 `Products` 。虽然现在这样做还算说得过去，但是当一个组件内的代码变得很多时，最好的方式是为每一个组件建立一个独立的文件。就我的经验来说，如果一个组件占用的代码超过 `10` 行，我就会为它创建一个新的文件。所以从第二个演示开始，我将会为那些代码过多而放在 `App.js` 中会显得特别臃肿的组件单独创建一个文件来存放。

在 `App` 组件中我们已经写好了路由的逻辑，`<Route>` 的 `path` 如果与当前位置相匹配的话，对应的组件也会被渲染。在以前，要被渲染的组件应该作为 `<Route>` 组件的属性传入的，但是现在的版本只要作为 `<Route>` 的子组件就可以被正确渲染。

在上面的路由设计中，`/` 将会匹配 `/` 、`/category` 以及 `/products` ，这带来的结果是会同时在页面上渲染三个组件，即 `Home` 、`Category` 及 `Products` ，这不是我们所希望看到的。因此，我们可以通过传入 `exact` 属性给 `<Route>` 组件来避免这个问题出现：

<Route exact path="/">
      <Home />
    </Route>
    复制代码

所以如果你期望的是根据一个安全匹配的 `path` 去渲染对应的组件，你就应该考虑使用属性 exact 了。

## 嵌套路由 ##

如果想要使用嵌套路由，我们要更加深入地理解 `<Route>` 组件的工作方式，接下来我们一探究竟。 通过 React Router 官方文档 可知，使用 `<Route>` 渲染一个页面（或组件）的最佳方式是使用子元素方式，就像我们上面的演示一样。然而，还是有一些其它的方式，这些方式是为了兼容在没有引进 hooks 之前的早期版本的 React Router 构建的 APP：

*  `component` ：当 URL 匹配时，React Router 会使用 `React.createElement` 从给定的组件创建一个 React 元素。
 *  `render` ：能使你便捷的渲染内联组件或是嵌套组件，你可以给这个属性传入一个函数，当路由的路径匹配时调用，返回一个元素。
 *  `children` ：与 `render` 属性有些类似，它也是接收一个函数，不同的是，无论现在 `path` 是否与当前位置匹配，这个函数都会被执行。

### 路径和匹配 ###

属性 `path` 是用于识别路由应该被匹配到的 URL 部分，它使用 path-to-regexp 库将字符串形式的 `path` 转换为一个正则表达式，然后将它与当前的位置进行匹配。

如果路由的 `path` 与当前位置完全匹配时，一个 match 对象 就会被创建，这个对象中有关于 URL 和路径的更多信息，这些信息可以通过这个对象的属性来进行访问，下面为大家列出有哪些属性：

*  `match.url` ：一个字符串（string），返回 URL 匹配的部分，这对于构建嵌套的 `<Link>` 组件特别有用。
 *  `match.path` ：一个字符串（string），返回路由的 `path` ，即 `<Route path="">` ，我们将使用它来构建嵌套的 `<Route>` 组件。
 *  `match.isExact` ：一个布尔值（boolean），如果匹配时精确的，即没有任何尾部字符，则返回 `true` 。
 *  `match.params` ：一个对象（object），返回的是从 URL 中解析出来键值对。

### 属性的隐式传递 ###

请注意，当使用 `component` 属性来渲染路由时，`match` 、`location` 及 `history` 这些路由属性是隐式地传给被渲染的组件的。但当使用比较新的路由渲染模式时，情况有所不同。

比如，以下面这个组件为例：

const Home = (props) => {
      console.log(props);
    
      return (
        <div>
          <h2>Home</h2>
        </div>
      );
    };
    复制代码

以这种方式渲染路由：

<Route exact path="/" component={Home} />
    复制代码

控制台打印的日志：

{
      history: { ... }
      location: { ... }
      match: { ... }
    }
    复制代码

但是现在如果以这种方式渲染路由：

<Route exact path="/">
      <Home />
    </Route>
    复制代码

控制台打印的日志将会是这样：

{}
    复制代码

可能你会觉得以这种方式来使用不太好，因为我们在渲染的组件中拿不到路由属性了。但是不用担心，React v5.1 引入了几个 hooks，通过在组件内部使用这些 hooks 可以助你访问到上面隐式传递的任何路由属性，这是一种新的管理路由状态的方法，并在一定程度上使我们的组件更加整洁。 我将在本教程中使用其中的一些 hooks，但是如果你想要更深入地了解，可以查看 React Router v5.1 的发布公告。请注意，hooks 是在 React 的 `16.8` 版本中引入的，所以你至少需要在这个版本以上才能使用它们。

### `Switch` 组件 ###

在开始代码演示之前，我想先向大家介绍一下 `Switch` 组件。当多个 `<Route>` 被一起使用时，所有匹配到的路由都会被渲染，大家看下下面的代码，我会向大家解释为什么 `<Switch>` 是有用的：

<Route exact path="/"><Home /></Route>
    <Route path="/category"><Category /></Route>
    <Route path="/products"><Products /></Route>
    <Route path="/:id">
      <p>This text will render for any route other than '/'</p>
    </Route>
    复制代码

如果 URL 是 `/products` ，那么 `path` 为 `/products` 和 `/:id` 的路由会一起在页面渲染出来，这就是这样设计的。然而，这种行为基本不可能是我们所期待的，所以才要用到 `<Switch>` ，有了 `<Switch>` ，只有第一个与当前 URL 匹配到的子 `<Route>` 才会被渲染：

<Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/category">
        <Category />
      </Route>
      <Route path="/products">
        <Products />
      </Route>
      <Route path="/:id">
        <p>This text will render for any route other than those defined above</p>
      </Route>
    </Switch>
    复制代码

`path` 的 `:id` 部分用于动态路由，它将匹配斜杠后面的任何东西，并且这个匹配到的值在被渲染的组件中是可以拿到的，我们会在下一节演示如何取这个值。

现在我们知道了关于 `<Route>` 和 `<Switch>` 组件的一切，让我们看看本节的主题**嵌套路由**的示例吧。

### 动态嵌套路由 ###

在上面的示例中我们创建了 `/` 、`/category` 、`/products` 路由，但是如果我们想要匹配一个 `/category/shoes` 的路由咋办呢？让我们更新一波 `src/App.js` 的代码：

import React from "react";
    import { Link, Route, Switch } from "react-router-dom";
    import Category from "./Category";
    
    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    );
    
    const Products = () => (
      <div>
        <h2>Products</h2>
      </div>
    );
    
    export default function App() {
      return (
        <div>
          <nav className="navbar navbar-light">
            <ul className="nav navbar-nav">
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/category">Category</Link>
              </li>
              <li>
                <Link to="/products">Products</Link>
              </li>
            </ul>
          </nav>
    
          <Switch>
            <Route path="/">
              <Home />
            </Route>
            <Route path="/category">
              <Category />
            </Route>
            <Route path="/products">
              <Products />
            </Route>
          </Switch>
        </div>
      );
    }
    复制代码

你应该注意到了，我已经把 `Category` 组件独立出来了，而我们的嵌套路由就在这个组件中去定义，那么现在就来创建 `Category.js` 吧！

// src/Category.js
    
    import React from "react";
    import { Link, Route, useParams, useRouteMatch } from "react-router-dom";
    
    const Item = () => {
      const { name } = useParams();
    
      return (
        <div>
          <h3>{name}</h3>
        </div>
      );
    };
    
    const Category = () => {
      const { url, path } = useRouteMatch();
    
      return (
        <div>
          <ul>
            <li>
              <Link to={`${url}/shoes`}>Shoes</Link>
            </li>
            <li>
              <Link to={`${url}/boots`}>Boots</Link>
            </li>
            <li>
              <Link to={`${url}/footwear`}>Footwear</Link>
            </li>
          </ul>
          <Route path={`${path}/:name`}>
            <Item />
          </Route>
        </div>
      );
    };
    
    export default Category;
    复制代码

在这里我们使用 useRouteMatch hook 来获取上面我们说过的 `match` 对象。如前所述，`match.url` 为 URL 匹配的部分，用于构建嵌套链接。`match.path` 为路由的 `path` ，用于构建嵌套路由。 如果你觉得在 `match` 对象中的属性有理解上的困难，没关系，`console.log(useRouteMatch())` 打印在控制台仔细看看它的属性的值是什么，你就大概能知道啥意思了。

<Route path={`${path}/:name`}>
      <Item />
    </Route>
    复制代码

这就是我们对动态路由的第一次尝试，因为我们没有将路由写死，而是在属性 `path` 中使用了一个变量，`:name` 是一个路径参数，可以捕捉到 `category/` 之后的所有内容，直到遇到另外一个正斜杠（`/`）。因此，像 `category/running-shoes` 这样的路径名称将会创建一个 `params` 对象，如下所示：

{
      name: "running-shoes";
    }
    复制代码

为了在 `<Item>` 组件中访问到这个值，我们使用 useParams hook ，它返回一个 URL 参数的键值对的对象。 你可以在控制台中打印下看看返回的到底是什么，那么现在 `Category` 应该就会有三个子路由了。

## 带路径参数的嵌套路由 ##

我们把这个例子在复杂化一点，以便我们更好地去理解。在实际开发中，我们的路由必须具有处理数据并动态展示它们的功能。假设有一些 API 返回的产品数据，其格式如下：

const productData = [
      {
        id: 1,
        name: "NIKE Liteforce Blue Sneakers",
        description:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.",
        status: "Available",
      },
      {
        id: 2,
        name: "Stylised Flip Flops and Slippers",
        description:
          "Mauris finibus, massa eu tempor volutpat, magna dolor euismod dolor.",
        status: "Out of Stock",
      },
      {
        id: 3,
        name: "ADIDAS Adispree Running Shoes",
        description:
          "Maecenas condimentum porttitor auctor. Maecenas viverra fringilla felis, eu pretium.",
        status: "Available",
      },
      {
        id: 4,
        name: "ADIDAS Mid Sneakers",
        description:
          "Ut hendrerit venenatis lacus, vel lacinia ipsum fermentum vel. Cras.",
        status: "Out of Stock",
      },
    ];
    复制代码

假设我们还需要为以下的路径创建路由：

*  `/products` ：这应该显示一个产品列表。
 *  `/products/:productId` ：如果匹配到 `:productId` 那么就应该显示这个产品的数据，如果没有就显示一个错误信息。

创建一个新文件 `src/Products.js` 文件，并添加以下代码：

import React from "react";
    import { Link, Route, useRouteMatch } from "react-router-dom";
    import Product from "./Product";
    
    const Products = ({ match }) => {
      const productData = [ ... ];
      const { url } = useRouteMatch();
    
      /* Create an array of `<li>` items for each product */
      const linkList = productData.map((product) => {
        return (
          <li key={product.id}>
            <Link to={`${url}/${product.id}`}>{product.name}</Link>
          </li>
        );
      });
    
      return (
        <div>
          <div>
            <div>
              <h3>Products</h3>
              <ul>{linkList}</ul>
            </div>
          </div>
    
          <Route path={`${url}/:productId`}>
            <Product data={productData} />
          </Route>
          <Route exact path={url}>
            <p>Please select a product.</p>
          </Route>
        </div>
      );
    };
    
    export default Products;
    复制代码

首先我们使用了 `useRouteMatch` 钩子，并从 `match` 对象中拿到 URL ，然欧根据每个产品的 id 属性来建立一个 `<Link>` 组件的列表，并将其返回存储到一个 `linkList` 变量中。

第一个路由使用 `path` 中的一个变量，它与产品 id 对应，当匹配成功时，我们就会渲染 `<Product>` 组件（我们马上进行定义），将我们的产品数据传递给它：

<Route path={`${url}/:productId`}>
      <Product data={productData} />
    </Route>
    复制代码

注意到第二个路由中有一个 `exact` 属性，只有当 URL 是 `/products` 且其后面没有任何路径参数时才会渲染。

OK，下面是 `<Product>` 组件的代码，你只需要在 `src/Product.js` 创建这个文件：

import React from "react";
    import { useParams } from "react-router-dom";
    
    const Product = ({ data }) => {
      const { productId } = useParams();
      const product = data.find((p) => p.id === Number(productId));
      let productData;
    
      if (product) {
        productData = (
          <div>
            <h3> {product.name} </h3>
            <p>{product.description}</p>
            <hr />
            <h4>{product.status}</h4>
          </div>
        );
      } else {
        productData = <h2> Sorry. Product doesn't exist </h2>;
      }
    
      return (
        <div>
          <div>{productData}</div>
        </div>
      );
    };
    
    export default Product;
    复制代码

`find` 方法用于在产品数组中搜索一个 id 属性与 `match.params.productId` 相同的对象。如果该产品存在，就会渲染对应的数据。如果不存在，就会显示 “产品不存在”的信息。

最后，更新你的 `<App>` 组件，如下所示：

import React from "react";
    import { Link, Route, Switch } from "react-router-dom";
    import Category from "./Category";
    import Products from "./Products";
    
    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    );
    
    export default function App() {
      return (
        <div>
          <nav className="navbar navbar-light">
            <ul className="nav navbar-nav">
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/category">Category</Link>
              </li>
              <li>
                <Link to="/products">Products</Link>
              </li>
            </ul>
          </nav>
    
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/category">
              <Category />
            </Route>
            <Route path="/products">
              <Products />
            </Route>
          </Switch>
        </div>
      );
    }
    复制代码

现在你就可以在浏览器中访问你写的这些路由了，如果你选择“Products”，你会看到一个子菜单，并且显示了产品的数据。 尝试着好好理解下这个演示中的代码，确保你要掌握这部分内容。

## 权限路由 ##

在如今大多数网站应用中，只有登录了的用户才能访问网站的某些部分，比如掘金登录之后才会有进入到个人主页的入口。接下来这一节，我会告诉大家如何去实现一个权限路由，也就是说如果有人试图访问 `/admin` ，他将会首先被要求登录。

然而，我们需要先了解 React Router 的几个方面。

### `<Redirect>` 组件 ###

与服务端的重定向类似，React Router 的 Redirect component 将会用一个新的位置替换历史栈中的当前位置，新的位置是由 `to` 属性来指向的。那么接下来我就会向大家介绍如何使用 `<Redirect>` ：

<Redirect to={
        { pathname: '/login', state: { from: location }}}
    复制代码

如果有人试图在未登录状态下访问 `/admin` 路由，他就会被重定向到 `/login` 路由，关于当前位置的信息是由 `state` 属性进行传递的，这样做是为了在用户登录成功之后，用户又可以被重定向到他试图访问的路由页面。

### 自定义路由 ###

如果我们需要决定一个路由是否应该被渲染，那么编写一个自定义路由是个好办法，接下来在 `src` 目录下创建一个新文件 `PrivateRoute.js` ，并写入以下代码：

import React from "react";
    import { Redirect, Route, useLocation } from "react-router-dom";
    import { fakeAuth } from "./Login";
    
    const PrivateRoute = ({ component: Component, ...rest }) => {
      const location = useLocation();
    
      return (
        <Route {...rest}>
          {fakeAuth.isAuthenticated === true ? (
            <Component />
          ) : (
            <Redirect to={
        { pathname: "/login", state: { from: location } }} />
          )}
        </Route>
      );
    };
    
    export default PrivateRoute;
    复制代码

如你所见，在函数定义中，我们将接收到的 props 中拿到一个 `Component` 还有一个剩余属性 `rest` ，`Component` 将包含我们的 `<PrivateRoute>` 所保护的任何组件（在该例中为 `Admin` 组件），其余的属性将会通过 `rest` 传递给 `<Route>` 。

我们返回的是一个 `<Route>` 组件，该组件会根据用户是否登录来决定是否渲染受到保护的组件，如果没有登录将会重定向到 `/login` 路由。这是由 `fakeAuth.isAuthenticated` 属性决定的，这个属性从 `<Login>` 组件中导入。 这种封装的方法好处在于是声明式的，而且 `<PrivateRoute>` 可被重复使用。

### 实践权限路由 ###

现在我们可以修改 `src/App.js` ：

import React from "react";
    import { Link, Route, Switch } from "react-router-dom";
    import Category from "./Category";
    import Products from "./Products";
    import Login from "./Login";
    import PrivateRoute from "./PrivateRoute";
    
    const Home = () => (
      <div>
        <h2>Home</h2>
      </div>
    );
    
    const Admin = () => (
      <div>
        <h2>Welcome admin!</h2>
      </div>
    );
    
    export default function App() {
      return (
        <div>
          <nav className="navbar navbar-light">
            <ul className="nav navbar-nav">
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/category">Category</Link>
              </li>
              <li>
                <Link to="/products">Products</Link>
              </li>
              <li>
                <Link to="/admin">Admin area</Link>
              </li>
            </ul>
          </nav>
    
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/category">
              <Category />
            </Route>
            <Route path="/products">
              <Products />
            </Route>
            <Route path="/login">
              <Login />
            </Route>
            <PrivateRoute path="/admin" component={Admin} />
          </Switch>
        </div>
      );
    }
    复制代码

正如你所见，我们在文件的顶部添加了一个 `<Admin>` 组件，并在 `<Switch>` 组件下添加了一个 `<PrivateRoute>` 组件。正如前面所说，如果用户已经登录的话，这个自定义路由将会渲染的是 `<Admin>` 组件，否则，用户会被重定向到 `/login` 。

最后，这里是 `Login` 组件代码：

import React, { useState } from "react";
    import { Redirect, useLocation } from "react-router-dom";
    
    export default function Login() {
      const { state } = useLocation();
      const { from } = state || { from: { pathname: "/" } };
      const [redirectToReferrer, setRedirectToReferrer] = useState(false);
    
      const login = () => {
        fakeAuth.authenticate(() => {
          setRedirectToReferrer(true);
        });
      };
    
      if (redirectToReferrer) {
        return <Redirect to={from} />;
      }
    
      return (
        <div>
          <p>You must log in to view the page at {from.pathname}</p>
          <button onClick={login}>Log in</button>
        </div>
      );
    }
    
    /* A fake authentication function */
    export const fakeAuth = {
      isAuthenticated: false,
      authenticate(cb) {
        this.isAuthenticated = true;
        setTimeout(cb, 100);
      },
    };
    复制代码

我们使用 useLocation hook 来访问路由的 `location` 属性，也就是从 `state` 属性带过来的。然后我们使用对象的解构来获取用户在被要求登录之前试图访问的 URL，这个这个值不存在，我们就设为 `{ pathname: "/" }` 。

然后我们使用 React 的 `useState` 钩子来初始化一个 `redirectToReferrer` 状态为 `false` ，根据这个值来决定用户是被重定向到他们想要访问的路径（也就是说用户已经登录了），还是向用户展示一个按钮让他们登录。

一旦按钮被点击，`fakeAuth.authenticate` 这个方法就会被执行，它将 `fakeAuth.isAuthenticated` 设为 `true` ，并（在一个回调函数中）将 `redirectToReferrer` 状态更新为 `true` ，这将导致组件重新渲染，用户将被重定向。

## 完整示例 ##

以下就是我们使用学到的东西做出来的最终 demo：

![bac588f90dfef5f56411729a8658c3eb.png][] Edit React Router Demo

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[d15b59dac639909f66485d0de54a52f8.png]: /images/20221014/03ee70f8070d450abb2b9a9e2fb607a4.png
[bac588f90dfef5f56411729a8658c3eb.png]: /images/20221014/366c93767b964da084eb90c2fe3f7607.png