React Router基础使用

更新时间：2017年01月17日 16:13:17 作者：imwtr

本文主要介绍了React Router的基础知识，具有一定的参考价值，下面跟着小编一起来看下吧

React是个技术栈，单单使用React很难构建复杂的Web应用程序，很多情况下我们需要引入其他相关的技术

React Router是React的路由库，保持相关页面部件与URL间的同步

下面就来简单介绍其基础使用，更全面的可参考指南

1. 它看起来像是这样

在页面文件中

在外部脚本文件中

2. 库的引入

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方法中，就可以使用相关的组件了

3. 路由简单使用

最基本的，通过URL判断进入哪个页面（组件部件）

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>First</p>
 }
}
class Second extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>Second</p>
 }
}
class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <div></div>
 }
}

render((
 <Router history={hashHistory}>
 <Route path="/" component={App} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Router>
 ),
 document.getElementById('box')
);

首先，Router是一个容器，history属性定义了是用何种方式处理页面的URL

有三种：

browserHistory：通过URL的变化改变路由，是推荐的一种方式，但是需要在服务器端需要做一些配置（窝目前还不知怎么配）
hashHistory：通过#/ ，其实就像是单页面应用中常见的hashbang方式，example.com/#/path/path.. （使用简单，这里暂且就用这种方式）
createMemoryHistory：Memory history 并不会从地址栏中操作或是读取，它能够帮助我们完成服务器端的渲染，我们得手动创建history对象

然后，在容器中使用Route组件定义各个路由，通过path指定路径（可以看到，是不区分大小写的），通过component指定该路径使用的组件

也可以直接在Router容器上直接用routes属性定义各个路由，如

let routes =
 <div>
 <Route path="/" component={App} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </div>;
render(<Router routes={routes} history={hashHistory}></Router>, document.getElementById('box'));

需要注意的是{routes}中只能有一个父级，所以这里加了<div>标签

另外，路由Route也可以嵌套，在上面的例子中，嵌套起来可能更符合实际情况

需要注意的是，这里的App在父级，为了获取子级的First与Second组件，需要在App组件中添加 this.props.children 获取

class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <div>{this.props.children}</div>
 }
}
render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);

同样的，可以直接在Router中用routes属性定义路由

let routes =
 <Route path="/" component={App}>
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>;
render(<Router routes={routes} history={hashHistory}></Router>, document.getElementById('box'));

4. 路由的其他组件

除了基本的Route之外，IndexRoute、Redirect、IndexRedirect、Link、IndexLink等，顾名思义

IndexRoute: 在主页面会用到，如上个例子中，在路径"/"下我们看到的是空白页面，可以添加默认的页面组件用于导航
Link: 可以认为它是<a>标签在React中的实现，使用to属性定义路径，还可以通过activeClass或activeStyle定义active的样式
IndexLink: 类似Link，推荐用来定义指向主页面的链接，当然也可以随意定义

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <p>First
 <IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink>
 </p>
 )
 }
}
class Second extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return <p>Second</p>
 }
}
class Basic extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <ul role="nav">
 <li><IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink></li>
 <li><Link to="/first" activeStyle={{color: 'red'}}>First</Link></li>
 <li><Link to="/Second" activeClass="active">Second</Link></li>
 </ul>
 )
 }
}
class App extends Component {
 constructor(props) {
 super(props);
 }

 render() {
 return <div>
 {this.props.children}
 </div>
 }
}
render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <IndexRoute component={Basic} />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);

Redirect: 从from路径重定向到to路径
IndexRedirect: 在主页面，直接重定向到to路径

render((
 <Router history={hashHistory}>
 <Route path="/" component={App}>
 <IndexRoute component={Basic} />
 <IndexRedirect to="first" />
 <Redirect from="second" to="first" />
 <Route path="first" component={First} />
 <Route path="second" component={Second} />
 </Route>
 </Router>
 ),
 document.getElementById('box')
);

5. 路由的path规则

path定义的路由的路径，在hashHistory中，它的主页路径是 #/

自定义Route路由通过与父Route的path进行合并，在与主页路径合并，得到最终的路径

path的语法：

:paramName 匹配 URL 的一个部分，直到遇到下一个/、?、#
() 表示URL的这个部分是可选的
* 匹配任意字符(非贪婪模式)，直到模式里面的下一个字符为止
** 匹配任意字符(贪婪模式)，直到下一个/、?、#为止

<Route path="/hello/:name"> // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)"> // 匹配 /hello, /hello/michael, 和 /hello/ryan
<Route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/hello.html
<Route path="/**/*.jpg"> // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg

而:name可以通过 this.props.params 中取到

class First extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
 <p>First {this.props.params.name}
 <IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink>
 </p>
 )
 }
}
.
.
<Route path="/:name" component={First} />

通过React Dev Tool也可以看到组件的相关数据

6. 路由的onEnter、onLeave钩子

在路由的跳转中，我们可能需要在进入页面或离开页面的时候做一些特殊操作，Route 通过 onEnter 与 onLeave 定义了这两个行为

<Route path="first" component={First} onEnter={(nextState, replace) => {
 console.log(nextState);
 alert('onEnter');
 // replace('second');
 }} onLeave={() => {
 alert('onLeave');
 }}/>

如上，带两个参数，通过 replace 可以更新路径，把注释去掉后，进入"/first"时立马跳转值"/second"，这在检测登录时应该比较有用

更多的使用参见指南

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

React
Router

JavaScript中各数制转换全面总结
这篇文章主要介绍了JavaScript中各数制转换,利用toString的基模式来进行转换,对数字调用 toString(10) 与调用 toString() 它们返回的区别和相同之处等等都在本文中提及，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08
JavaScript编程的单例设计模讲解
这篇文章主要介绍了JavaScript编程的单例设计模讲解,单例模式编写有利于JS代码的维护和调试,需要的朋友可以参考下
2015-11-11
javascript设计模式之工厂模式
这篇文章主要为大家介绍了javascript工厂模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
JavaScript中的原型prototype属性使用详解
这篇文章主要介绍了JavaScript中的原型prototype属性使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
JavaScript DOM 学习第二章编辑文本
在这一章我会给出一个在CMS里非常有用的更新页面的代码。在任一段落点击鼠标你就可以修改了。完成以后点击按钮，修改的文本就显示了。
2010-02-02
JavaScript基本概念初级讲解论坛贴的学习记录
JavaScript基本概念论坛贴建议大家看下，都是一些js的高级的技巧知识小结。
2009-02-02
JavaScript排序算法之希尔排序的2个实例
希尔排序，也称递减增量排序算法，是插入排序的一种高速而稳定的改进版本。希尔排序是基于插入排序的以下两点性质而提出改进方法的
2014-04-04
JS中this的指向以及call、apply的作用
本篇文章给大家分享了JS基础内容this指向以及call、apply的相关知识点内容，有兴趣的朋友可以学习参考下。
2018-05-05
ASP.NET实现Repeater控件的数据绑定
这篇文章介绍了ASP.NET实现Repeater控件数据绑定的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
DOM基础教程之使用DOM设置文本框
这篇文章主要介绍了DOM基础教程之使用DOM设置文本框的相关资料,需要的朋友可以参考下
2015-01-01

React Router基础使用

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具