主要是通过服务器直接访问带 路由信息链接 的话 react-router 没有接管路由，需要先访问主页 index.js

02b-两种路由

HashRouter 会通过 url 地址中的 hash 值来对地址进行匹配 BrowserRouter 直接通过 url 地址进行组件的跳转，使用过程中和普通的 url 地址没有区别

为什么会有这两种 Router 呢？首先，你要明确我们的项目在开发完成后需要进行构建，构建后的代码需要放到服务器中，以供用户访问。服务器无非就是 Nginx 或 Apache 这些东西，服务器的主要功能是将 url 地址和网页进行映射。传统 web 项目中，每一个页面都对应一个文件，当用户访问/index.html 时，服务器会自动返回根目录下的 index.html。当用户访问/about.html 时，服务器会返回根目录下 about.html。换句话说 url 和文件的映射都是由服务器来完成的。

但是 React 项目不同，React 项目所有的页面都是通过 React 进行渲染构建的。项目中只存在一个 index.html 没有那么多的页面（所以才叫单页应用）。当浏览器地址发生变化时，比如用户访问/about 时，此时是不需要服务器介入的，react router 会自动挂载对应的组件。

当我们将 React 项目部署到服务器时，如果直接访问根目录，请求会直接发送给 index.html。这个页面我们是有的，所以此时不会有任何问题。用户访问页面后，点击页面后的连接切换到不同的组件也没有问题，因为页面并没有真的发生跳转，而是通过 react router 在内存中完成了模拟跳转。但是，当我们刷新某个路由或直接通过浏览器地址栏访问某个路由时，比如：http://localhost:3000/about，此时请求会发送给服务器，服务器会寻找名为 about 的资源（此时并没有经过 React）。显然找不到这个资源，于是返回 404。

这样一来，我们的项目只能够通过首页访问，然后点击链接跳转，刷新和直接通过路由访问都是不行的，一旦进行这些操作就会出现 404。

解决方案：

1. 使用 HashRouter，服务器不会去判断 hash 值， 所以使用 HashRouter 后请求将会由 React Router 处理
2. 修改服务器的配置，将所有请求都转发到 index.html

location / {
    root   html;
    #index  index.html index.htm;
    try_files $uri /index.html;
}