React-Router - Configuration

Posted on   |   In ,

基本的内嵌 和默认 组件请看

http://dreambo8563.github.io/2016/05/03/React-Router-Introduction/

Redirect


import { Redirect } from 'react-router'

render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />

      <Route path="inbox" component={Inbox}>
        {/* Redirect /inbox/messages/:id to /messages/:id */}
        <Redirect from="messages/:id" to="/messages/:id" />
      </Route>

      <Route component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

注意这里 from 和 to 一个是相对路径一个是 相对根目录的路径

Enter and Leave Hooks

当点击某个link 跳转的时候回触发一系列的hook

直接看例子

if a user clicked on a link to /about from /messages/5

  • onLeave on the /messages/:id route
  • onLeave on the /inbox route
  • onEnter on the /about route

相当于树的路径