关于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 DIV弹出效果实现代码
Jul 03 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
layer.js之回调销毁对话框的例子
Sep 11 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
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Django权限机制实现代码详解
2018/02/05 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
《云雀的心愿》教学反思
2014/02/25 职场文书
升学宴家长答谢词
2015/09/29 职场文书