React Router教程：为你的React应用添加导航

本文由 Erin Doherty 撰写，最初发表于Educative.io。

在本 React 教程中，我们将学习 React Router——一个专门用于处理 Web 应用路由的库。React Router 的核心功能是根据 URL 中使用的路由（/例如首页）有条件地渲染要显示的组件。

为什么要使用 React Router？它允许您构建带有导航的单页 Web 应用程序 (SPA)。React Router 使用组件结构来调用组件，从而显示相应的信息。React Router 还允许用户使用浏览器的后退按钮和刷新页面等功能，同时保持应用程序的正确视图。

要学习本教程，您应该对 DOM（文档对象模型）、HTML、npm 和 JavaScript 等 Web 开发概念有一定的了解。

接下来，我们将介绍以下内容：

什么是 React Router？
客户端与服务器端
React Router 与 React Router DOM 的比较
单页应用程序（SPA）
React Router教程：为你的React应用添加导航
React Router 的优势
资源

如果你是 React 新手或者需要复习一下基础知识，可以看看我的文章《什么是 React？入门教程》。

什么是 React Router？

React Router 是一个库，它允许你使用动态路由来处理 Web 应用中的路由。动态路由是在应用渲染过程中进行的，这与传统的路由架构不同，后者是在运行中的应用之外配置路由。React Router 采用基于组件的路由方式，并根据应用和平台的需求提供不同的路由组件。下图展示了 React Router 的动态路由与传统静态路由的对比：

这是一个非常简单的单页应用（SPA），它使用 React Router 实现了路由功能。这段代码属于routes.js一个 React 应用的文件。要查看完整的应用运行效果，请访问我的原文。

import React from 'react';
import { Home } from './views/Home';
import { About } from './views/About';
import { NavBar } from './components/NavBar';
import { Route, Switch, Redirect } from 'react-router-dom';

export const Routes = () => {
  return (
    <div>
      <NavBar />
      <Switch>
        <Route exact path="/Home" component={Home} />
        <Route exact path="/">
          <Redirect to="/Home" />
        </Route>
        <Route exact path="/About" component={About} />
      </Switch>
    </div>
  );
};

NavBar应用程序顶部有一个组件，用于切换不同的视图，即Home和About。该router.js文件用于定义 SPA 的所有路由。

首先routes.js，导入组件、视图和所需的包（第 1-5 行）。然后定义 SPA 可以使用的所有路由，并将Home组件设置为默认路由（第 13-15 行）。最后，使用以下模板在标签之间添加所有可能的路由<Switch>：

<Route exact path="/specifiedPath" component={componentName} />

当在 Web 应用程序上访问componentName该页面时，将渲染该组件（）。"/specifiedPath"

最后一步只需要将这些路由从文件中导入routes.js，index.js并将它们放在一个标签内即可。<Router>

可以使用 npm cli 工具安装 React Router：

> npm install react-router-dom

然后就可以导入到 SPA 中并使用它。

客户端与服务器端

讨论路由和 React Router 时，我们不能不提及客户端和服务端。客户端指的是浏览器，它的处理过程在本地机器上进行——例如在 React 中渲染用户界面。服务端则是信息处理并发送到浏览器的地方。

服务器端是指操作在 Web 服务器上进行。大多数 JavaScript 代码无需访问 Web 服务器即可完成。客户端是指 JavaScript 代码在客户端计算机或浏览器上运行（当我们讨论 Web 应用程序时）。服务器端 JavaScript 是指代码在提供网页服务的服务器上运行。

React Router 与 React Router DOM 的比较

React Router DOM 是 React Router 的 DOM 绑定，或者更简单地说，是用于网站的 React Router。与之相对的是 React-Router-Native，它是用于使用 React Native 的应用程序开发环境（通常是移动操作系统，例如 iPhone/iOS）的绑定。
回到我们关于 Web 开发与原生开发的话题，React Router 和 React 一样，也有两种版本：

网站
本国的

单页应用程序

单页应用程序会根据服务器返回的新数据动态重写网页，而不是像浏览器默认那样加载全新的页面。当用户点击链接时，不会跳转到全新的页面。相反，新的内容会直接加载到当前页面上，因此只会渲染页面中必要的组件。

点击“了不起的麦瑟尔女士”：

单页应用程序可以让网站看起来更像原生应用。很多网页都是用单页应用程序编写的，其中每个组件都是独立渲染的。

单页应用程序正是 React Router 发挥作用的地方。用户访问网站时，有些功能是他们期望能够正常工作的，例如浏览器的后退按钮，或者 URL 能够正确指向他们当前浏览的页面。在单页应用程序中，实现这些功能可能会比较复杂，因为存在“深层链接”问题。单页应用程序中的某些信息可能隐藏在多个组件之下，那么开发者如何确保地址栏中显示的是指向该组件的正确 URL 呢？答案是：路由——这也是我们学习 React Router 的原因。React Router 是一个 JavaScript 库，它为使用 React 构建的单页应用程序提供路由功能。

构建单页应用程序的概念步骤：

主父组件
初始帧：静态（又称应用帧）
- 它可以是一个不可见的 HTML 元素，用作所有网页内容的容器；也可以是一个页眉或标题。
- 在上方的狗狗SPA示意图中，左侧的“联系我们”和“护理入门”两个部分在SPA的两个视图中保持不变。点击中间的链接后，会显示麦瑟尔女士的图片。
React Router 定义了一个路由区域
- 导航链接
- 用于加载内容的容器——在我们上面的图示中——是显示麦瑟尔女士图片的中心区域。
该组件为导航、浏览器历史记录处理提供了基础，以便用户可以使用前进和后退按钮。