关于react-router的几种配置方式详解
本文介绍关于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找到对应的映射。
- 这里需要注意的是indexroute这个有点不一样的标签,这个的作用就是匹配'/'的路径,因为在渲染app整个组件的时候,可能它的children还没渲染,就已经有'/'页面了,你可以把indexroute当成首页。
- 嵌套路由就直接在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中有实现代码拆分功能的工具来用,其实就是把路由拆分成小代码块,然后按需加载。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: NodeJS使用七牛云存储上传文件的方法
下一篇: JS实现按钮控制计时开始和停止功能