React-Router

2018/07/14 10:04
阅读数 16

友情提示:本文暂时主要涉及 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 使用教程-阮一峰

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部