react router 4

React Router V4 也走了react的路，咳，一切都成组件。例如Route、Link、Switch等都是组件。
react-router和react-router-dom是react router拆分出来的，平时使用只须要引入react-router-dom，固然，若是搭配redux，你还须要使用react-router-redux。

Router

React Router 4 中，你能够将各类组件及标签放进 <Router>组件中，它用来保持与 location 的同步。tips: <Router>组件下只容许存在一个子元素。能够像如下方式使用：

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />  //在app中进行拆分，放网站的导航连接，以及其余的
  </BrowserRouter>
), document.getElementById('main'))

1. <BrowserRouter>：使用 HTML5 提供的 history API（pushState,
   replaceState以及popstate事件） 来保持 UI 和 URL
   的同步，在服务区来管理动态请求时，须要使用<BrowserRouter>组件；
2. <HashRouter>：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL
   的同步，通常静态页面使用；
3. <MemoryRouter>：能在内存保存你 “URL” 的历史纪录(并无对地址栏读写)；
4. <NativeRouter>：为使用React Native提供路由支持；
5. <StaticRouter>：从不会改变地址；

<Route>组件有以下属性：

1. path: 路由匹配路径。（没有path属性的Route 老是会 匹配）；
2. exact：为true时，则要求路径与location.pathname必须彻底匹配,如 path='/test',你就只能匹配到'/test'；
3. strict：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname，如path='/test/'只匹配 '/test/*'；

<Route>提供了三种渲染内容的方法：

1. <Route component>：在地址匹配的时候React的组件才会被渲染，route props也会随着一块儿被渲染；
2. <Route render>：当匹配成功后调用该函数。该过程与传入component参数相似,这种方式对于内联渲染和包装组件却不引发意料以外的从新挂载特别方便；
3. <Route children>：与render属性的工做方式基本同样，除了它是无论地址匹配与否都会被调用；

tips:<Route component>的优先级要比<Route render>高,一般component参数与render参数被更常常地使用。children参数偶尔会被使用，它更经常使用在path没法匹配时呈现的'空'状态。

<Switch>

<Switch>会遍历自身的子元素（即路由）并对第一个匹配当前路径的元素进行渲染

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

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

<Link>

当你点击<Link>时，URL会更新，组件会被从新渲染，可是页面不会从新加载。
Link组件属性：

1. to（string/object）：要跳转的路径或地址；
2. replace（bool）：为 true 时，点击连接后将使用新地址替换掉访问历史记录里面的原地址；为 false
   时，点击连接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false；

// Link组件示例

// to为string
<Link to="/about">关于</Link>

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

// replace 
<Link to="/courses" replace />

React Router拥有优质的文档，你能够查看并从中了解更多的信息