时间:2021-05-25
本文介绍关于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}> {} <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找到对应的映射。
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中有实现代码拆分功能的工具来用,其实就是把路由拆分成小代码块,然后按需加载。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
react-router模块化配置因为公司的需要最近踏进了react坑,一直在挖坑填坑,在路由这一块折腾得不行。直接进入主题,配置react-router模块化
前言本文主要给大家介绍了关于react-router跳转传值的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:react-router跳转传值1.引
前言最近把react-router升级了一下,在使用react-router-dom是,子组件使用this.props.history找不到了,看看官方文档,找
本文介绍了React从react-router路由上做登陆验证控制的方法,分享给大家,具体如下:验证代码importReactfrom'react'import
PS:本篇文章使用的React-Router版本为react-router-dom:^5.0.0(兼容4.x)使用过Vue2的同学们应该都知道这个内置组件,它可