什么是 React Router?

React Router 是一个基于 React 之上的强大路由库，可以帮助您快速地向应用添加视图和数据流，同时保持 UI 与 URL 同步。

React Router 与 history 库的区别?

React Router 是history库的包装器，它处理浏览器的window.history与浏览器和哈希历史的交互。它还提供了内存历史记录，这对于没有全局历史记录的环境非常有用，例如移动应用程序开发（React Native）和使用 Node 进行单元测试。

在 React Router v4 中的组件是什么?

React Router v4 提供了以下三种类型的 组件:

    <BrowserRouter>
    <HashRouter>
    <MemoryRouter>

以上组件将创建browser，hash和memory的 history 实例。React Router v4 通过router对象中的上下文使与您的路由器关联的history实例的属性和方法可用。

history 中的 push() 和 replace() 方法的目的是什么?

一个 history 实例有两种导航方法：

    push()
    replace()

如果您将 history 视为一个访问位置的数组，则push()将向数组添加一个新位置，replace()将用新的位置替换数组中的当前位置。

ReactJS 的5种路由模式

我们一直在使用的路由方式是BrowserRouter，也就是浏览器的路由方式，其实React还有几种路由方式：

1、BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式

2、HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径

3、MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化

4、NativeRouter：经常配合ReactNative使用，多用于移动端

5、StaticRouter：设置静态路由，需要和后台服务器配合设置，比如设置服务端渲染时使用

为什么你会得到 “Router may have only one child element” 警告?

此警告的意思是Router组件下仅能包含一个子节点。

你必须将你的 Route 包装在块中，因为是唯一的，它只提供一个路由。

首先，您需要在导入中添加Switch：

import { Switch, Router, Route } from 'react-router'

然后在块中定义路由：

<Router>
  <Switch>
    <Route {/* ... */} />
    <Route {/* ... */} />
  </Switch>
</Router>