React Router 5 完整指南

[vortesnail]

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