react-router-dom中的基本API

RR4 本次采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立的包，分别是：

• react-router React Router 核心

• react-router-dom 用于 DOM 绑定的 React Router

• react-router-native 用于 React Native 的 React Router

• react-router-redux React Router 和 Redux 的集成

• react-router-config 静态路由配置的小助手

使用react-router 还是 react-router-dom？

在 React 的使用中，我们一般要引入两个包，react 和 react-dom，那么 react-router 和react-router-dom 是不是两个都要引用呢？
非也，坑就在这里。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了

BrowserRouter

<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。

HashRouter

使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。

<Link>

为你的应用提供声明式的、可访问的导航链接。必须要有to属性，否则页面报错

to: string
一个字符串形式的链接地址，通过 pathname、search 和 hash 属性创建。
<Link to='/courses?sort=name' />

to: object
一个对象形式的链接地址，可以具有以下任何属性：
pathname - 要链接到的路径
search - 查询参数
hash - URL 中的 hash，例如 #the-hash
state - 存储到 location 中的额外状态数据

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  query: {id: '',}
  state: {
    fromDashboard: true
  }}} />

replace: bool
当设置为 true 时，点击链接后将替换历史堆栈中的当前条目，而不是添加新条目。默认为 false。

<Link to="/courses" replace />

<NavLink>

个特殊版本的 <Link>，它会在与当前 URL 匹配时为其呈现元素添加样式属性。

<NavLink to="/about">About</NavLink>

activeClassName: string
当元素处于激活状态时应用的类，默认为 active。它将与 className 属性一起使用。

<NavLink to="/faq" activeClassName="selected">FAQs</NavLink>

Redirect

使用 <Redirect> 会导航到一个新的位置。新的位置将覆盖历史堆栈中的当前条目，重定向

Route

exact：bool
如果为 true，则只有在 path 完全匹配 location.pathname 时才匹配。

render: func
使用 render 可以方便地进行内联渲染和包装，而无需进行上文解释的不必要的组件重装。
// 方便的内联渲染

<Route path="/home" render={() => <div>Home</div>} />

Switch

为了解决route的唯一渲染（仅仅渲染一个路由路径）出现的