（1）安装路由

React-router

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供dom操作进行跳转的api。

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。

安装：

npm i -S react-router-dom

（2）导入与使用

import {BrowserRouter as Router, Route} from 'react-router-dom'

//用一些 <Route> 来渲染 <Router>。

ReactDOM.render(

    <Router>

        <div>

            <Route path="/" component={App}/>

            <Route path="/abc" component={Abc}/>

            <Route path="/bbc" component={Bbc}/>

        </div>

    </Router>

    , document.getElementById('root'));

在内部，router 会将你树级嵌套格式的 转变成路由配置。但如果你不熟悉 JSX，你也可以用普通对象来替代：

const routes = {

path: '/',

component: App,

childRoutes: [

{ path: 'abc', component: Abc},

{ path: 'bbc', component: Bbc},

]

}

React.render(, document.body)

（3）其他基础用户法

1、exact：表示只对当前的路由进行匹配。

<div>

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

 <Route path="/app" component={App}/>

 <Route path="/abc" component={Abc}/>

 <Route path="/bbc" component={Bbc}/>

</div>

2、获取 URL 参数

比如访问 /foo?bar=baz，可以通过访问 this.props.location.query.bar 从 Route 组件中获得 "baz" 的值。

3、通过IndexRoute 来设置一个默认页面。当 URL 为 / 时，我们想渲染一个在 App 中的组件。不过在此时，App 的 render 中的 this.props.children 还是 undefined。

import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({

  render() {

    return <div>Welcome to the app!</div>

  }

})

React.render((

  <Router>

    <Route path="/" component={App}>

      {/* 当 url 为/时渲染 Dashboard */}

      <IndexRoute component={Dashboard} />

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

      <Route path="inbox" component={Inbox}>

        <Route path="messages/:id" component={Message} />

      </Route>

    </Route>

  </Router>

), document.body)

4、使用 使这个 URL 重新正常工作。现在当有人点击 /inbox/messages/5 这个链接，他们会被自动跳转到 /messages/5

import { Redirect } from 'react-router'

React.render((

  <Router>

    <Route path="/" component={App}>

      <IndexRoute component={Dashboard} />

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

      <Route path="inbox" component={Inbox}>

        <Route path="/messages/:id" component={Message} />

        {/* 跳转 /inbox/messages/:id 到 /messages/:id */}

        <Redirect from="messages/:id" to="/messages/:id" />

      </Route>

    </Route>

  </Router>

), document.body)