本文共 4921 字,大约阅读时间需要 16 分钟。
http://www.cnblogs.com/imwtr/p/6293469.html?utm_source=tuicool&utm_medium=referral
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术
React Router是React的路由库,保持相关页面部件与URL间的同步
下面就来简单介绍其基础使用,更全面的可参考
在页面文件中
在外部脚本文件中
React Router库的引入,有两种方式
2.1 浏览器直接引入
可以引用 的浏览器版本,或者下载之后引入
然后就可以直接使用 ReactRouter 这个对象了,我们可能会使用到其中的几个属性
let {Router, Route, IndexRoute, Redirect, IndexRedirect, Link, IndexLink, hashHistory, browserHistory} = ReactRouter;
2.2 npm 安装,通过构建工具编译引入
npm install --save react-router
安装好路由库之后,在脚本文件中引入相关属性
import {Router, Route, IndexRoute, Redirect, IndexRedirect, Link, IndexLink, hashHistory, browserHistory} from 'react-router';
因浏览器目前还不能支持import与export命令,且babel工具不会将require命令编译,所以我们还得需要如Webpack等构建工具编译引入
库引入之后,在ReactDOM的render方法中,就可以使用相关的组件了
最基本的,通过URL判断进入哪个页面(组件部件)
class First extends Component { constructor(props) { super(props); } render() { returnFirst
}}class Second extends Component { constructor(props) { super(props); } render() { returnSecond
}}class App extends Component { constructor(props) { super(props); } render() { return }}
render((), document.getElementById('box'));
首先,Router是一个容器,history属性定义了是用何种方式处理页面的URL
:
然后,在容器中使用Route组件定义各个路由,通过path指定路径(可以看到,是不区分大小写的),通过component指定该路径使用的组件
也可以直接在Router容器上直接用routes属性定义各个路由,如
let routes =;render(, document.getElementById('box'));
需要注意的是{routes}中只能有一个父级,所以这里加了<div>标签
另外,路由Route也可以嵌套,在上面的例子中,嵌套起来可能更符合实际情况
需要注意的是,这里的App在父级,为了获取子级的First与Second组件,需要在App组件中添加 this.props.children 获取
class App extends Component { constructor(props) { super(props); } render() { return{this.props.children}}}render((), document.getElementById('box'));
同样的,可以直接在Router中用routes属性定义路由
let routes =;render( , document.getElementById('box'));
除了基本的Route之外,IndexRoute、Redirect、IndexRedirect、Link、IndexLink等,顾名思义
class First extends Component { constructor(props) { super(props); } render() { return () }}class App extends Component { constructor(props) { super(props); } render() { returnFirst
Basic ) }}class Second extends Component { constructor(props) { super(props); } render() { returnSecond
}}class Basic extends Component { constructor(props) { super(props); } render() { return (
render((), document.getElementById('box'));
path定义的路由的路径,在hashHistory中,它的主页路径是#/
自定义Route路由通过与父Route的path进行合并,在与主页路径合并,得到最终的路径
:
// 匹配 /hello/michael 和 /hello/ryan // 匹配 /hello, /hello/michael, 和 /hello/ryan // 匹配 /files/hello.jpg 和 /files/hello.html // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg
而:name可以通过 this.props.params 中取到
class First extends Component { constructor(props) { super(props); } render() { return (First {this.props.params.name}
Basic ) }}..
通过React Dev Tool也可以看到组件的相关数据
在路由的跳转中,我们可能需要在进入页面或离开页面的时候做一些特殊操作,Route 通过 onEnter 与 onLeave 定义了这两个行为
{ console.log(nextState); alert('onEnter'); // replace('second'); }} onLeave={() => { alert('onLeave'); }}/>
如上,带两个参数,通过 replace 可以更新路径,把注释去掉后,进入"/first"时立马跳转值"/second",这在检测登录时应该比较有用
更多的使用参见