react-router4

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 静态路由配置的小助手

（1）react-router-dom

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

import { BrowserRouter, Router, Route, Switch, Redirect } from 'react-router-dom';

（2）组件

<BrowserRouter>

一个使用了 HTML5 history API 的高阶路由组件，保证你的 UI 界面和 URL 保持同步。

<BrowserRouter

    basename="/minooo" // 添加一个基准URL

    forceRefresh={false} // 当浏览器不支持 HTML5 的 history API 时强制刷新页面

    getUserConfirmation={getConfirmation()} // 导航到此页面前执行的函数

    keyLength={12} // 设置它里面路由的 location.key 的长度。默认是6

></BrowserRouter>

<Route>

path：任何可以被 path-to-regexp解析的有效 URL 路径

exact：如果为 true，path 为 '/one' 的路由将不能匹配 '/one/two'，反之，亦然。

strict: 对路径末尾斜杠的匹配。如果为 true。path 为 '/one/' 将不能匹配 '/one' 但可以匹配 '/one/two'。

component：当使用 component 时，router 将使用 React.createElement 根据给定的 component 创建一个新的 React 元素。这意味着如果你使用内联函数（inline function）传值给 component将会产生不必要的重复装载。对于内联渲染（inline rendering）, 建议使用 render

render：此方法适用于内联渲染，而且不会产生上文说的重复装载问题。

<Route> 也许是 RR4 中最重要的组件了，它最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。

<Route

path="/" // url路径

exact  // bool 严格匹配 ’/link’与’/’是不匹配的，但是在false的情况下它们是匹配的

component={IndexPage} // 渲染的组件

/

/>

<

<Route

path="/" // url路径

strict  // bool 严格匹配 '/one/' 与'/one'是不匹配的，但是在false的情况下它们是匹配的

render={() => <div>Home</div>} // 内联渲染

/

/>

<Link>

为你的应用提供声明式，无障碍导航

// to为string

<Link to='/courses?sort=name'/>

// to为obj

<Link to={{

  pathname: '/courses',

  search: '?sort=name',

  hash: '#the-hash',

  state: { fromDashboard: true }

}

}}/>

// replace

<

<Link to="/courses" replace />

// replace(bool)：为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址； 为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；

<NavLink>

这是 <Link> 的特殊版，顾名思义这就是为页面导航准备的。因为导航需要有 “激活状态”。

<NavLink to="/about" exact>About</NavLink> // exact若为 true，只有当访问地址严格匹配时激活样式才会应用

<NavLink to="/faq"

  activeClassName="selected"

> //activeClassName：导航选中激活时候应用的样式名，默认样式名为 active

>FAQs</NavLink>

<NavLink to="/faq"

  activeStyle={{ //activeStyle：如果不想使用样式名就直接写style

    fontWeight: 'bold',

    color: 'red'

  }}

>

>FAQs</NavLink>

<NavLink to="/events/123"

  isActive={oddEvent}

> // 决定导航是否激活，或者在导航激活时候做点别的事情。

>Event 123</NavLink>

<Switch>

<Switch>只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>

<Switch>

  <Route exact path="/" component={Home}/>

  <Route path="/about" component={About}/>

  <Route path="/:user" component={User}/>

  <Route component={NoMatch}/>

</Switch>

<Redirect>

<Redirect> 渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址。

// 通过from匹配路由重定向

<Switch>

  <Redirect from='/users/:id' to='/users/profile/:id'/>

  <Route path='/users/profile/:id' component={Profile}/>

</Switch>

/

// 通过render重定向

<Route exact path="/" render={() => (

  loggedIn ? (

    <Redirect to="/dashboard"/>

  ) : (

    <PublicHomePage/>

  )

)

)}/>

（3）对象和方法

history

histoty 是 RR4 的两大重要依赖之一（另一个当然是 React 了），在不同的 javascript 环境中， history 以多种能够行驶实现了对会话（session）历史的管理。

history 对象通常具有以下属性和方法：

length: number 浏览历史堆栈中的条目数

action: string 路由跳转到当前页面执行的动作，分为 PUSH, REPLACE, POP

location: object 当前访问地址信息组成的对象，具有如下属性：

      pathname: string URL路径

      search: string URL中的查询字符串

      hash: string URL的 hash 片段

      state: string 例如执行 push(path, state) 操作时，location 的 state将被提供到堆栈信息里，state 只有在 browser 和 memory history 有效。

push(path, [state]) 在历史堆栈信息里加入一个新条目。

replace(path, [state]) 在历史堆栈信息里替换掉当前的条目

go(n) 将 history 堆栈中的指针向前移动 n。

goBack() 等同于 go(-1)

goForward 等同于 go(1)

block(prompt) 阻止跳转

location

location 是指你当前的位置，将要去的位置，或是之前所在的位置

在以下情境中可以获取 location 对象

在 Route component 中，以 this.props.location 获取

在 Route render 中，以 ({location}) => () 方式获取

在 Route children 中，以 ({location}) => () 方式获取

在 withRouter 中，以 this.props.location 的方式获取

match

match 对象包含了 <Route path> 如何与 URL 匹配的信息，具有以下属性：

params: object 路径参数，通过解析 URL 中的动态部分获得键值对

isExact: bool 为 true 时，整个 URL 都需要匹配

path: string 用来匹配的路径模式，用于创建嵌套的 <Route>

url: string URL 匹配的部分，用于嵌套的 <Link>

在以下情境中可以获取 match 对象

在 Route component 中，以 this.props.match获取

在 Route render 中，以 ({match}) => () 方式获取

在 Route children 中，以 ({match}) => () 方式获取uter 中，以 this.props.match的方式获取matchPath 的返回值

当一个 Route 没有 path 时，它会匹配一切路径。