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 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
JSON格式化输出
Nov 10 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
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 缓存实现代码及详细注释
2010/05/16 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php 中的closure用法详解
2017/06/12 PHP
php表单处理操作
2017/11/16 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
详解Python字典小结
2018/10/20 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
Python如何进行时间处理
2020/08/06 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
欢迎横幅标语
2014/06/17 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
婚礼家长致辞
2015/07/27 职场文书