React-Router

友情提示：本文暂时主要涉及 React Router < 4.0 版本。

React Router 是一个基于 React 强大路由库，支持向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

路由配置

React Router 是建立在 history 之上的，提供 3 种 history 形式

• browserHistory
• hashHistory
• createMemoryHistory

一个 history 知道如何去监听浏览器地址栏的变化，并解析URL转化为location对象，然后Router使用它匹配到路由，最后正确地渲染对应的组件，同时路由会在渲染时将以下属性注入组件中：

• history：Router的history对象，eg.: this.props.history.pushState(state, path, query)
• location：当前的的loaction信息
• params：URL的动态字段
• route：渲染组件的路由
• routeParams：路由的动态字段
• children：指向该路由下的子路由，匹配到的子route的元素将被渲染

提供一个示例，仅供参考

/// 如果 route 的路径是 users/:userId，URL 是 /users/123/portfolios/345
this.props.routeParams 是 {userId: '123'}
this.props.params 是 {userId: '123', portfolioId: 345}

history对象同时提供API方法

• pushState(state, pathname, query) 
• replaceState(state, pathname, query)
• createPath(pathname, query)

在组件中获取history对象的方法

• this.props.history层层传递
• 使用this.context.history访问

有关history兴起的历程，参见：React Router中的History；

常用组件

Link

用于正常的用户点击跳转，对于表单跳转、点击按钮跳转等操作。

提供两种方法与React Router对接：

• browserHistory.push

import { browserHistory } from 'react-router'
class MyComp extends React.Component({
  // ...
  handleSubmit(event) {
    event.preventDefault()
    // ... event.target.elements[0].value
    const path = `/repos/${xxx1}/${xxx2}`
    browserHistory.push(path)
  }
})

// 注意，该方法需额外声明
MyComp.contextTypes = {
  router: React.PropTypes.object
};

• this.context.router.push

class MyComp extends React.Component({
  // ask for `router` from context
  static contextTypes = {
    router: React.PropTypes.object
  }

  handleSubmit(event) {
    // ...
    this.context.router.push(path)
  },
})

以上均是在组件内部导航，若想在组件外导航页面，只能使用browserHistory对象

// your main file that renders a Router
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'
render(<Router history={browserHistory} routes={routes}/>, node)

// somewhere like a redux/flux action file:
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')

其他组件的相关信息，可参见：Router API 文档；　　

注意事项

• 版本

React Router 4 较之前的版本有较大改动，务必注意。

在React-Router-4之前版本，若采用路由

<Router history={browserHistory} />

如果开发服务器使用的是 webpack-dev-server，需加上--history-api-fallback参数

$ webpack-dev-server --inline --content-base . --history-api-fallback

避免刷新时报错。

参考

React-Router 中文简明教程；官方示例教程 - react-router-tutorial；

Introduction | React Router 中文文档；

React Router 使用教程-阮一峰；