关于react-router的几种配置方式详解


Posted in Javascript onJuly 24, 2017

本文介绍关于react-router的几种配置方式详解,分享给大家,具体如下:

路由的概念

路由的作用就是将url和函数进行映射,在单页面应用中路由是必不可少的部分,路由配置就是一组指令,用来告诉router如何匹配url,以及对应的函数映射,即执行对应的代码。

react-router

每一门JS框架都会有自己定制的router框架,react-router就是react开发应用御用的路由框架,目前它的最新的官方版本为4.1.2。本文给大家介绍的是react-router相比于其他router框架更灵活的配置方式,大家可以根据自己的项目需要选择合适的方式。

1.标签的方式

下面我们看一个例子:

import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({
 render() {
  return <div>Welcome to the app!</div>
 }
})

React.render((
 <Router>
  <Route path="/" component={App}>
   {/* 当 url 为/时渲染 Dashboard */}
   <IndexRoute component={Dashboard} />
   <Route path="about" component={About} />
   <Route path="inbox" component={Inbox}>
    <Route path="messages/:id" component={Message} />
   </Route>
  </Route>
 </Router>
), document.body)

我们可以看到这种路由配置方式使用Route标签,然后根据component找到对应的映射。

  1. 这里需要注意的是IndexRoute这个有点不一样的标签,这个的作用就是匹配'/'的路径,因为在渲染App整个组件的时候,可能它的children还没渲染,就已经有'/'页面了,你可以把IndexRoute当成首页。
  2. 嵌套路由就直接在Route的标签中在加一个标签,就是这么简单

2.对象配置方式

有时候我们需要在路由跳转之前做一些操作,比如用户如果编辑了某个页面信息未保存,提醒它是否离开。react-router提供了两个hook,onLeave在所有将离开的路由触发,从最下层的子路由到最外层的父路由,onEnter在进入路由触发,从最外层的父路由到最下层的自路由。

让我们看代码:

const routeConfig = [
 { path: '/',
  component: App,
  indexRoute: { component: Dashboard },
  childRoutes: [
   { path: 'about', component: About },
   { path: 'inbox',
    component: Inbox,
    childRoutes: [
     { path: '/messages/:id', component: Message },
     { path: 'messages/:id',
      onEnter: function (nextState, replaceState) {
       //do something
      }
     }
    ]
   }
  ]
 }
]

React.render(<Router routes={routeConfig} />, document.body)

3.按需加载的路由配置

在大型应用中,性能是一个很重要的问题,按需要加载JS是一种优化性能的方式。在React router中不仅组件是可以异步加载的,路由也是允许异步加载的。Route 可以定义 getChildRoutes,getIndexRoute 和 getComponents 这几个函数,他们都是异步执行的,并且只有在需要的时候才会调用。

我们看一个例子:

const CourseRoute = {
 path: 'course/:courseId',

 getChildRoutes(location, callback) {
  require.ensure([], function (require) {
   callback(null, [
    require('./routes/Announcements'),
    require('./routes/Assignments'),
    require('./routes/Grades'),
   ])
  })
 },

 getIndexRoute(location, callback) {
  require.ensure([], function (require) {
   callback(null, require('./components/Index'))
  })
 },

 getComponents(location, callback) {
  require.ensure([], function (require) {
   callback(null, require('./components/Course'))
  })
 }
}

这种方式需要配合webpack中有实现代码拆分功能的工具来用,其实就是把路由拆分成小代码块,然后按需加载。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
js opener的使用详解
Jan 11 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
javascript回调函数详解
Feb 06 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
简单实现js放大镜效果
Jul 24 #Javascript
Vue列表页渲染优化详解
Jul 24 #Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 #Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 #Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 #Javascript
在React中如何优雅的处理事件响应详解
Jul 24 #Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 #Javascript
You might like
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
VUE实现强制渲染,强制更新
2019/10/29 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python中对list去重的多种方法
2014/09/18 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
pyshp创建shp点文件的方法
2018/12/31 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
会计自荐书
2013/12/02 职场文书
个人委托书格式
2014/04/04 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android