React Router v4是对React Router的一次完整重构，采纳动态路由，遵照React中一切皆组件的头脑，每个Route(路由)都是一个平常的React组件。

BrowserRouter建立的URL情势以下：
http://react.com/some/path
HashRouter建立的URL情势以下：
http://react.com/#/some/path

运用BrowserRouter时，平常还需要对服务器举行设置，让服务器能准确处理一切能够的URL.比方，当浏览器发送 http://react.com/some/path 和 http://react.com/some/path2两…，服务器能够返回准确的HTML页面（也就是单页面运用中唯一的html页面).运用HashRouter则不存在这个题目，由于hash部份的内容会被服务器自动疏忽，真正有用的是hash前面的部份，而关于单页面运用来讲，这部份内容是牢固的。

路由的设置

1.path

(1)当运用BrowserRouter时，path用来形貌这个Route婚配的URL的pathname
(2)当运用HashRouter时,path用来形貌这个Route婚配的URL的hash.

2.match

(1)params: Route的path能够包括参数，比方：<Route path=’/foo/:id’> 包括一个参数id。params就是用于从婚配的URL中解析出path中的参数，比方：当URL=”http://react.com/foo/1时，params={id:1}。
(2)isExact: 是一个布尔值，当URL完整婚配时，值为true;当URL部份婚配时，值为false.比方：当path=”/foo”，URL=”http://react.com/foo”时，是完整婚配；当URL=”http://react.com/foo/1时，是部份婚配。
(3)path: Route的path属性，构建嵌套路由时会运用到。
(4)url: URL的婚配部份。

3.Route衬着组件的体式格局

(1)component
component的值是一个组件，当URL和Route婚配时，component属性定义的组件就会被衬着。
<Route path=’/foo’ component={FOO}>
当URL=”http://react.com/foo”时，Foo组件会被衬着。
(2)render
render的值是一个函数，这个函数返回一个React元素，这个函数返回一个React元素。这类体式格局能够很轻易的为待衬着的组件通报分外的属性。
比方：
<Route path=’/foo’ render={(props)=>(

<Foo {...props} data={extraProps} />

)}>
Foo组件接收了一个分外的data属性。
(3)children children的值也是一个函数，函数返回要衬着的React元素。与之前两种体式格局差别的是，不管是不是婚配胜利，children返回的组件都将会被衬着。然则当婚配不胜利时，match属性为null。比方：
<Route path=’/foo’ children={(props)=>(

<div className={props.match?'active':''}>
    <Foo />
</div>

)} />
假如Route婚配当前URL,待衬着元素的根节点div的class将被设置成active。

4.Switch和exact
当URL和多个Route婚配时，这些Route都邑实行衬着操纵。假如只想让第一个婚配的Router衬着，那末能够把这些Route包到一个Switch组件中。
假如想让URL和Route完整婚配时，Route才衬着，那末能够运用Route的exact属性。Switch和exact经常团结运用，用于运用首页的导航。
比方：
<Router>

<Switch>
 <Route exact path='/' component={Home} />
 <Route path='/posts' component={Posts} />
 <Route path='/:user' component={User} />
</Switch>

</Router>
假如不运用Switch，当URL的pathname为”/posts”时，<Route path=’/posts’/>和<Route path=’/:user’ />都邑被婚配。
假如不运用exact,”/” “/posts” “/user1″等险些一切URL都邑婚配第一个Route，又由于Switch的存在，背面的两个Route永久也不会被婚配。运用exact,保证只有当URL的pathname为”/”时，第一个Route才会被婚配。

5.嵌套路由

嵌套路由是指在Route衬着的组件内部定义新的Route.比方：
const Posts = ({match}) => {

return(
    <div>
        {/*这里match.url即是／posts*/}
        <Route path={`${match.url}/:id`} component={PostDetail} />
        <Route exact path={match.url} component={PostList} />
    </div>
)

}
当URL的pathname为”/posts/react”时，PostDetail组件会被衬着；当URL的pathname为”/posts”时，PostList组件会被衬着。Route的嵌套运用让运用能够越发天真的运用路由。

6.链接

Link是React Router供应的链接组件，一个Link组件定义了当点击该Link时，页面应当怎样路由：
比方：
const Navigation = () => (

<header>
    <nav>
        <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/posts'>Posts</Link></li>
        </ul>
    </nav>
</header>

)
Link运用to属性声明要导航到URL地点。to能够是string或object范例，当to为object范例时，能够包括pathname、search、hash、state、四个属性，比方：
<Link to={{

pathname:'/posts',
search:'?sort=name',
hash:'#the-hash",
state:{formHome:true}

}}/>
除了运用Link外，我们还能够运用history对象手动完成导航，history中最经常使用的要领是push(path,[state])和replace(path,[state]),push会向浏览器历史记载中新增一条记载，replace会用新记载替代当前记载，比方：

history.push(‘/posts’)
history.replace(‘/posts’)

import React from “react”;
import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

function BasicExample() {
return (

<Router>
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
    </ul>

    <hr />

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/topics" component={Topics} />
  </div>
</Router>

);
}

function Home() {
return (

<div>
  <h2>Home</h2>
</div>

);
}

function About() {
return (

<div>
  <h2>About</h2>
</div>

);
}

function Topics({ match }) {
return (

<div>
  <h2>Topics</h2>
  <ul>
    <li>
      <Link to={`${match.url}/rendering`}>Rendering with React</Link>
    </li>
    <li>
      <Link to={`${match.url}/components`}>Components</Link>
    </li>
    <li>
      <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
    </li>
  </ul>

  <Route path={`${match.path}/:topicId`} component={Topic} />
  <Route
    exact
    path={match.path}
    render={() => <h3>Please select a topic.</h3>}
  />
</div>

);
}

function Topic({ match }) {
return (

<div>
  <h3>{match.params.topicId}</h3>
</div>

);
}

export default BasicExample;