React-Router-v4

Veröffentlicht am

React-Router-v4(简称RR4)早已经正式发布，他遵循着React的设计理念，即万物皆组件,RR4只是提供了一大堆的导航功能的组件，具有声明式，可组合性的特点，RR4本次采用了单代码仓库模型架构，这意味着有若干个相互独立的包。
他们分别是

  • React-router RR4核心
  • React-router-dom 用于DOM绑定的React Router
  • React-router-native 用于React Native 的Router
  • React-router-redux React Router和Redux的集成
  • React-router-config 静态路由配置助手

一般我们只需要引用react-router-dom这个包就行了，当然，如果要搭配redux，你就需要使用react-router-redux

React-router一些重要的API

BrowerRouter

一个使用了HTML5的History API的高阶路由器组件，保证你的UI界面和URL保持同步，拥有的是属性。

basename：string

作用：为所有位置添加一个基准URL
使用场景：假如你需要把页面部署到服务器的二级目录，你可以使用basename设置此目录

1
2
3
<BrowserRouter basename='/minoo'/>
<Link to='/react' />
//最终渲染为<a href='/minoo/react'>

getUser Configmation:func

作用：导航到页面前执行的函数，默认使用window.confim
使用场景：当需要用户进入页面前执行什么操作时可用，一般用的不多

1
2
3
4
const getConfirmation = (message,callback) => {
	const allowTransition = window.confim(message)
	callback(allowTransition)
}

forceRefresh:bool

作用：当浏览器不支持HTML5的History API时强制使用刷新页面
使用场景：同上

1
2
const supportsHistory = 'pushState' in window.history
<BrowerRouter forceRefresh = {!supportsHistory}

KeyLength:number

作用：设置它里面路由的History.key的长度，默认值是6，（key的作用点击同一个链接时，每次该路由下的location.key都会改变，可以通过key的变化来刷新页面）

children:node

作用：渲染唯一子元素
使用场景：作为一个React组件，天生自带children属性。