路由库 React-Router

基本用法

• 通过管理 URL，实现组件的切换和状态的变化；
• 使用时，路由器 Router 就是 React 的一个组件；
• Router 组件本身只是一个容器，真正的路由要通过 Route 组件定义；
• 可以同时使用多个Route组件，也可以嵌套使用；

path 属性

Route组件的path属性指定路由的匹配规则：

• 设置 path 属性：当路径匹配时，加载指定组件；
• 省略 path 属性时：不管路径是否匹配，总是会加载指定组件；

通配符

规则如下：

通配符	规则
:paramName	:paramName 匹配 URL 的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过 this.props.params.paramName 取出
()	() 表示 URL 的这个部分是可选的
*	* 匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
**	** 匹配任意字符，直到下一个/、?、# 为止。匹配方式是贪婪模式。

路由匹配规则是从上到下执行，一旦发现匹配，其余的规则就不再生效了。

IndexRoute 组件

IndexRoute 组件会显式指定 Home 是根路由的子组件，即指定默认情况下加载的子组件。可以把 IndexRoute 想象成某个路径的index.html。例如：

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

此时，用户访问 / 的时候，加载的组件结构如下：

<App>
  <Home/>
</App>

这样，App 只包含下级组件的共有元素，本身的展示内容则由 Home 组件定义。这样有利于代码分离，也有利于使用 React Router 提供的各种 API。
PS：IndexRoute组件没有路径参数path。

history 属性

Router 组件的 history 属性，用来监听浏览器地址栏的变化，并将 URL 解析成一个地址对象，供 React Router 匹配。

值	描述	形式举例
hashHistory	路由将通过URL的hash部分（#）切换	example.com/#/some/path
browserHistory	显示正常的路径，调用浏览器的History API	example.com/some/path
createMemoryHistory	用于服务器渲染，创建一个内存中的 history 对象	不与浏览器URL互动

关于 browserHistory 的注意事项：

• 需要对服务器改造。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。
• 如果开发服务器使用的是webpack-dev-server，加上–history-api-fallback参数就可以了。

关于上面提到的贪婪模式

贪婪模式

在使用修饰匹配次数的特殊符号时，有几种表示方法可以使同一个表达式能够匹配不同的次数，比如："{m,n}", “{m,}”, “?”, “*”, “+”，具体匹配的次数随被匹配的字符串而定。这种重复匹配不定次数的表达式在匹配过程中，总是尽可能多的匹配。

非贪婪模式

在修饰匹配次数的特殊符号后再加上一个 “?” 号，则可以使匹配次数不定的表达式尽可能少的匹配，使可匹配可不匹配的表达式，尽可能的 “不匹配”。这种匹配原则叫作 “非贪婪” 模式，也叫作 “勉强” 模式。如果少匹配就会导致整个表达式匹配失败的时候，与贪婪模式类似，非贪婪模式会最小限度的再匹配一些，以使整个表达式匹配成功。