React Router V4使用指南(精讲)

一、前端路由和后端路由

1)后端路由

多页应用中，一个URL对应一个HTML页面，一个Web应用包含很多HTML页面，在多页应用中，页面路由控制由服务器端负责，这种路由方式称为后端路由。

多页应用中,每次页面切换都需要向服务器发送一次请求，页面使用到的静态资源也需要重新加载，存在一定的浪费。而且，页面的整体刷新对用户体验也有影响，因为不同页面间往往存在共同的部分，例如导航栏、侧边栏等，页面整体刷新也会导致共用部分的刷新。

2)前端路由

在单面应用中，URL发生并不会向服务器发送新的请求，所以“逻辑页面”的路由只能由前端负责，这种路由方式称为前端路由。

目前，国内的搜索引擎大多对单页应用的SEO支持的不好，因此，对于 SEO 非常看重的 Web
应用(例如，企业官方网站，电商网站等)，一般还是会选择采用多页面应用。React 也并非只能用于开发单页面应用。

二、React Router 安装

这里使用的 React Router 的大版本号是 v4, 这也是目前最新版本。

React Router 包含3个库, react-router、react-router-dom、和 react-router-native。react-router 提供最基本的路由功能，实际使用，我们不会直接安装 react-router,而是根据应用运行的环境选择安装 react-router-dom(在浏览器中使用)或 react-router-native(在 react-native中使用)。react-router-dom 和 react-router-native 都依赖 react-router,所以在安装时， react-router 也会自动安装。

创建 Web应用，使用

npm install react-router-dom

创建 navtive 应用，使用

 npm install react-router-native

三、路由器

React Router 通过 Router 和 Route 两个组件完成路由功能。Router 可以理解成路由器，一个应用中需要一个 Router 实例，所有跌幅配置组件 Route 都定义为 Router 的子组件。在 Web应用中，我们一般会使用对 Router 进行包装的 BrowserRouter 或 HashRouter 两个组件 BrowserRouter使用 HTML5 的 history API（pushState、replaceState等）实现应用的 UI 和 URL 的同步。HashRouter 使用 URL 的 hash 实现应用的 UI 和 URL 同步。

BrowserRouter 创建的 URL 形式如下：http://example.com/some/path

HashRouter 创建的 URL 形式如下： http://example.com/#/some/path

使用 BrowserRouter 时，一般还需要对服务器进行配置，让服务器能正确地处理所有可能的URL。例如，当浏览器发生 http://example.com/some/path 和 http://example.com/some/path2 两个请求时，服务器需要能返回正确的 HTML 页面（也就是单页面应用中唯一的 HTML 页面）

HashRouter 则不存在这个问题，因为 hash 部分的内容会被服务器自动忽略，真正有效的信息是 hash 前端的部分，而对于单页应用来说，这部分是固定的。