React 入门学习笔记整理（九）——路由

（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)