React Router学习笔记

        React Router是基于React之上的路由库，一开始在官网没找到对应的API，着实费了一点劲，本文将就React Router的内容做一个简单的总结

路由配置

基本配置

import React from 'react'
import { Router, Route, Link } from 'react-router'
React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

添加首页

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)

嵌套路径的非嵌套路由

        一些嵌套过深的页面会导致路由的过度嵌套，其实我们拥有对路由的绝对掌控，并非一定要设置为多层嵌套的路由，可以参照下面的例子

React.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        {/* 使用 /messages/:id 替换 messages/:id */}
        <Route path="/messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

        我们看到，只需要多加一个斜杠，就可以通过绝对路径来设置路由，从而避免层层嵌套的问题

兼容其余路由

        有一些用户输入的地址可能在设置的路由情况之外，我们可以用Redirect来重定向到对应的位置

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)

进入和离开的Hook

        Route 可以定义 onEnter 和 onLeave 两个 hook ，这些hook会在页面跳转确认时触发一次。这些 hook 对于一些情况非常的有用，例如权限验证或者在路由跳转前将一些数据持久化保存起来。

Histories

        React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。Histories可以分为三种，browserHistory, hashHistory, createMemoryHistory

browserHistory

        Browser history 是使用 React Router 的应用推荐的 history。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。使用需要在服务器端做相应的配置

hashHistory

        Hash history 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。（默认）

createMemoryHistory

        Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境（像 React Native ）。

IndexRoute与IndexLink

IndexRoute默认路由

        默认路由存在的意义就在于，可以用this.props.children在app中调用默认的首页

indexLink

        如果你在这个 app 中使用 Home , 它会一直处于激活状态，因为所有的 URL 的开头都是 / 。因为“子路由被激活的时候，父路由也是被激活的“
        可以看到IndexLink的作用：只有当该路由而不是其子路由被激活时，改路由才是被激活的。换句话说，IndexLink突破了“子路由被激活时，父路由也是被激活的”的限制。