React路由

// 写在App.js中
export default () => {
  return (
    <BrowserRouter>
      route matchers...
    </BrowserRouter>
  )
}

```forceRefresh(bool)```：如果为```true```，那么跳转时会整页刷新。默认是```true```。  

```keyLength(number)```：```location.key```的长度。默认是```6```。  

```children(node)```：要渲染的子元素，包括```Switch```、```Route```。

###### \<HashRouter>

HashRouter基于HTMLAnchorElement.hash。

HashRouter使用的URL类似于```http://example.com#page```，这样的URL只会发送```#```前面的部分给服务器，所以不需要配置服务器。  

```basename(string)```、```getUserConfirmation()```、```children(node)```同上。  

```hashType(string)```：```window.location.hash```的编码方式。```slash```例如```#/sunshine/lollipops```；```noslash ```例如```#sunshine/lollipops```；```hashbang```例如```#!/sunshine/lollipops```。  

#### route matchers

解决“如何匹配URL”“哪个URL对应哪个组件”的问题。  

###### Switch

如果```Route```在```Switch```中，那么会从当前所在的页面对应的```Route```开始向下寻找，只渲染第一个匹配的```Route```。  
如果不用```Switch```包裹```Route```，那么所有能匹配的```Route```都会被渲染。

```location(object)```：默认时用当前栈顶的```location```进行匹配；如果传了这个值，就用传的值进行匹配。  

```children(node)```：```Route```或```Redirect```。  

###### Route

```routeProps(object)```：```component```、```render```、```children```接受的function都会以它为参数。包含```match```、```location```、```history```。  

```component(function)```：输入routeProps，返回模板。在每次render时，如果```location```匹配，就以这个function为参数调用```React.createElement()```创建一个新组件，并卸载已经存在的组件。  

```render(function)```：输入routeProps，返回模板。在每次render时，如果```location```匹配，就更新已经存在的组件。  

```children(function)```：输入routeProps，返回模板。在每次render时，无论```location```是否匹配，都会创建一个新组件，并卸载已经存在的组件。 不匹配时，```routeProps.match```为```null```。  

```path(string)```：用于匹配URL的path。默认匹配任何URL。  

```exact(bool)```：当```true```时，匹配整个URL；否则，只匹配URL的begin。  

```strict(bool)```：当```true```时，如果path末尾有```/```，那么URL末尾也要有```/```才能匹配。   

```sensitive(bool)```：当```true```时，大小写敏感。  

#### navigation

###### \<Link>

等价于```a标签```。点击后，默认会添加1个URL为```host[:port]/basename/to```的```history entry```，并访问。  

```to(string)```：用1个字符串创建```location```用于路由匹配，包括```pathname```、```search```、```hash部分```。  

```to(object)```：创建用于路由匹配的```location```，包括```pathname```、```search```、```hash部分```和```state```。

```to(function(location))```：返回代表新的```location```的对象或字符串。  

```replace(bool)```：当```true```时，会改变当前的```history entry```而不是添加。默认```false```。  

```component(React.Component)```：基于```a标签```自定义地实现导航标签。  

```other```：其它的```a标签```的属性，例如```title```、```id```、```className```等。  

###### \<NavLink>

如果当前URL是匹配```to```的，那么```NavLink```会变成```activeClassName```指定的样式。  

```activeClassName(string)```：   。  

```activeStyle(object)```：   。  

```exact(bool)```：当```true```时，只有精确匹配才会显示指定的样式。  

```strict(bool)```：同```Route strict```。 

```isActive(function(match, location))```：决定链接是否激活的额外逻辑。  

```location(object)```：默认是比较栈顶的```history entry```的```location```。当传这个参数时，就是与传的```location```作比较。  

###### \<Redirect>

不需要模板，因为不渲染任何东西，只重定向。  

```to(string)```：要重定向到的```path```。  

```to(object)```：要重定向到的```location```。  

```push(bool)```：当```true```时，会创建新的```location```而不是修改当前的。   

```from(string)```：当```Redirect```用在```Switch```中时，相当于```path```，用于匹配。   

```exact(bool)```：同上。   

```strict(bool)```：同上。   

```sensitive(bool)```：同上。

#### 官方文档中的其它问题

###### Scroll Restoration

解决“跳转之后Scroller应该滚动到哪”的问题。  

###### Server Rendering

解决“服务端渲染的路由应该如何做”的问题。

## 动态路由

###### 静态路由

在APP初始化阶段声明“组件与URL的匹配关系”，匹配关系一旦声明就不可改变。  

###### 动态路由

在APP运行阶段，为组件的```props```添加```path```，说明本组件与哪个URL匹配，匹配关系可以在运行时动态改变的。  
```动态路由```可实现```嵌套路由```、```响应式路由```。

###### 嵌套路由

嵌套路由可实现局部刷新。  
URL的path部分嵌套，形如：/path1/path2；其中，path1与component1对应，path2与component2对应，component1与component2嵌套。  
当访问/path1/other时，刷新component1和other component；再访问/path1/path2时，只刷新component2。

###### 响应式路由

相同的```path```在不同尺寸的屏幕上应该显示不同的UI/组件。例如：  

## History

```history```管理一个```history stack```，栈中有```history entry```，用来记录用户的“访问历史”。  
当访问1个```entry```时，哪个组件能匹配它的```location```，就渲染哪个组件。

#### 访问

#### 字段

```length(number)```：```stack```中的```entry```数量。  
```action(string)```：栈顶```entry```的```action```，是```PUSH```、```REPLACE```、```POP```中的一个。  
```location(object)```：栈顶```entry```的```location对象```。   

#### 方法

```push(path, [state])```：向栈中添加1个```entry```，会改变地址栏中的URL，但不访问它。  
```replace(path, [state])```：替换栈顶的```entry```，会改变地址栏中的URL，但不访问它。  
```go(n)```：会问向前或向后的第n个```entry```。  
```goBack()```：等价于go(-1)。  
```goForward()```：等价于go(1)。  

## Location

```location```看起来是这样的：  

#### 访问

#### 使用

当```目标UI/组件```不只依赖于```path```还依赖于```state```时，可以把```location```作为参数，实现单页传参。例如：  

## Match

#### 访问

#### 字段

```params(object)```：页面间数据传输来的键值对。    
```isExact(boolean)```：是否能匹配整个URL。   
```path(string)```：用于匹配URL的path。  
```url(string)```：被匹配上的URL。  

## Path

```path="/"```匹配任何URL，所以这个```Route```应该放在最后。  
```path```越短的```Route```应该越靠后。 

## 单页传参

#### Query Parameters

数据会在URL中以query形式显示。  

#### Path Parameters

数据会在URL中以relactivepath形式显示。