现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。

 前端路由的功能可以让用户从一个视图（页面）导航到另一个视图（页面），前端路由是一套映射规则，在React中是 URL路径 与 组件 的对应关系使用React路由简单来说，就是配置路径和组件（配对）。

路由的基本使用

1. 安装：yarn add react-router-dom

2. 导入路由的三个核心组件：Router / Route / Link

5. 使用 Route 组件配置路由规则和要展示的组件（路由出口）

页面一的页面内容

Router 组件：包裹整个应用，一个 React 应用只需要使用一次

两种常用 Router：HashRouter 和 BrowserRouter

HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first）

（推荐）BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first）

Route 组件：指定路由展示组件相关信息

1. 点击 Link 组件（a标签），修改了浏览器地址栏中的 url 。

2. React 路由监听到地址栏 url 的变化。

3. React 路由内部遍历所有 Route 组件，使用路由规则（ path ）与 pathname 进行匹配。

4. 当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容。