React Router基础使用


Posted in Javascript onJanuary 17, 2017

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

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

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

1. 它看起来像是这样

在页面文件中

 React Router基础使用

在外部脚本文件中

 React Router基础使用

 React Router基础使用

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判断进入哪个页面(组件部件)

React Router基础使用

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,推荐用来定义指向主页面的链接,当然也可以随意定义

React Router基础使用

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路径

React Router基础使用

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 Router基础使用

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

React Router基础使用

6. 路由的onEnter、onLeave钩子

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

React Router基础使用

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

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

React Router基础使用

更多的使用参见 指南

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
ES6 十大特性简介
Dec 09 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
JavaScript自定义分页样式
Jan 17 #Javascript
javascript实现页面滚屏效果
Jan 17 #Javascript
javascript中递归的两种写法
Jan 17 #Javascript
基本DOM节点操作
Jan 17 #Javascript
React快速入门教程
Jan 17 #Javascript
javascript操作cookie
Jan 17 #Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 #Javascript
You might like
PHP Document 代码注释规范
2009/04/13 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
php的4种常见运行方式
2015/03/20 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python列表与元组详解实例
2013/11/01 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python验证企业工商注册码
2015/10/25 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
AUC计算方法与Python实现代码
2020/02/28 Python
flask项目集成swagger的方法
2020/12/09 Python
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
大学军训决心书
2015/02/05 职场文书
六一活动主持词
2015/06/30 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
赞美教师的句子
2019/09/02 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
关于MySQL中explain工具的使用
2023/05/08 MySQL