本篇内容:

  • 单一的路由无嵌套
  • 多层嵌套路由
  • 获取路径中的参数
  • 按需加载

单一的路由无嵌套

routers.js

import Home from 'components/Home';
import News from 'components/News';
import User from 'components/User';
import My from 'components/My'; let routes=[
{
path:'/',
component:Home ,
exact:true
},
{
path:'/news',
component:News ,
},
{
path:'/user',
component:User
},
{
path:'/my',
component:My
},
]
export default routes;

App.jsx

import React, { Component } from 'react';
import { HashRouter as Router, Switch, Route } from "react-router-dom";
import routes from '../routers/index';
class App extends Component {
render() {
return (
<Router>
<div>
<Switch>
//主要逻辑在这里
{
routes.map((item, i) => {
if(item.exact){
return <Route exact path={item.path} component={item.component} key={i}/>
}else{
return <Route path={item.path} component={item.component} key={i}/>
}
})
}
</Switch>
</div>
</Router>
);
}
}

多层嵌套路由

let routes=[
{
path:'/hear',
component:Hear,
exact:true,
description:"听",
subs:[
{
path:'/hear/',
component:HearIndex,
description:"听-首页"
},
{
path:'/hear/book',
component:HearBook,
description:"听-课文"
},
]
},
{
path:'/speak',
component:Speak,
exact:true,
description:"说",
subs:[
{
path:'/speak/',
component:CN,
description:"说-汉语"
},
{
path:'/speak/english',
component:English,
description:"说-英语"
},
]
},
{
path:'/read',
component:Read,
exact:true,
description:"读",
subs:[
{
path:'/read/',
component:ReadBook,
description:"读-课文"
},
{
path:'/read/newspaper',
component:ReadNews,
description:"读-报纸"
},
]
},
{
path:'/writ',
component:Writ,
exact:true,
description:"写"
}
]
export default routes;

App.jsx

{
routes.map((item, i) => {
if (item.exact) {
//官方固定格式
return <Route exact path={item.path} key={i} render={ props => (<item.component {...props} routes={item.subs}/>) />
}
else {
return <Route path={item.path} key={i} render={ props => (<item.component {...props} routes={item.subs}/>)} />
}
})
}

//step 2,在对应的组件中再次遍历

{
this.props.routes.map((item, i) => {
return <Route exact path={item.path}
component= {item.component}
key={i}/>
})
}

跳转

this.props.history.push(`/about/type/${id}`)
this.props.history.replace(...)

注意:

不能在子组件中直接获取,需要从父级传入之后用props获取;

跳转时,如果还有事件未结束,则容易报错!

如:

<LoginCom TIMEID={TIMEID} {...this.props}/>

获取路径参数

获取对应的params

this.props.match.params.id

获取?后面对应的值

const getQueryString = (str,name) => {
let result = str.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
if (result == null || result.length < 1) {
return "";
}
return decodeURI(result[1], "utf-8");
}

如:http://localhost:3000/#/textbook/bishun?val=看

console.log(getQueryString(this.props.location.search,'val'));

按需加载

感觉这种方式最简单:

基于 webpack, babel-plugin-syntax-dynamic-import, 和 react-loadable;

主要是利用了react-loadable这个高级组件,他是专门用来异步加载(也可以预加载)组件的。

cnpm i -S react-loadable @babel/plugin-syntax-dynamic-import

.babelrc

{
“ presets ”:[ “ @ babel / react ” ],
“ plugins ”:[ “ @ babel / plugin-syntax-dynamic-import ” ]
}

routers.js变化

import Loadable from 'react-loadable';
import DelayLoading from './DelayLoading'; const Home= Loadable({loader: () => import('../components/Home'), loading : DelayLoading,delay:3000})
const Login= Loadable({loader: () => import('../components/Login'), loading : DelayLoading,delay:3000})

打包文件情况对比:

首屏加载情况对比:

参考文档:

https://reacttraining.com/react-router/web/example/route-config

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md

https://github.com/jamiebuilds/react-loadable

可参考其他文章:https://www.cnblogs.com/alan2kat/p/7754846.html

React进阶篇(1) -- react-router4模块化的更多相关文章

  1. React进阶篇学习

    继续上一次基础篇, 分享一些关于React的进阶技术 React 进阶部分 ** context ** ** setState vs forceUpdate ** ** Mixins ** ** HO ...

  2. React进阶篇(2) -- Redux

    前言 如果还不知道为什么要使用Redux,说明你暂时还不需要它. 三大原则 单一数据源 整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一 ...

  3. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  4. React进阶之高阶组件

    前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...

  5. React进阶之路书籍笔记

    React进阶之路: "于复合类型的变量,变量名不指向数据,而是指向数据所在的地址.const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心 ...

  6. React基础篇学习

    到今天为止, 使用react已经一年了, 现在整理一下入门时的一些重要知识, 帮助想要学习react的同学们理解某些内容. React 元素 React 元素,它是 React 中最小基本单位,我们可 ...

  7. react基础篇入门组件

    讲述一下React: 1.声明式设计-React采用声明范式,可以轻松描述应用 2.高效-React通过DOM模型,最大限度的减少dom的交互 3.灵活-React可以与已知的库或框架很好的配合 4. ...

  8. react基础篇六

    创建 Refs 使用 React.createRef() 创建 refs,通过 ref 属性来获得 React 元素.当构造组件时,refs 通常被赋值给实例的一个属性,这样你可以在组件中任意一处使用 ...

  9. [转] React 最佳实践——那些 React 没告诉你但很重要的事

    前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码.用谷歌搜中 ...

随机推荐

  1. git学习2 - 安装

    msysgit是Windows版的Git,从https://git-for-windows.github.io下载(网速慢的同学请移步国内镜像),然后按默认选项安装即可. 安装完成后,在开始菜单里找到 ...

  2. verilog 之语法学习

    1.使用非基数表示的十进制视为有符号数.使用基数表示的十进制被视为无符号数. 2.线网中的值被解释为无符号数,整型寄存器中的值被解释为有符号的二进制补码数,. 3.如果选择表达式的值为 x.z,或越界 ...

  3. IntelliJ IDEA 安装 Julia 插件

    打开 IntelliJ IDEA 点击 Configure 选择 Plugins 然后点击 Browse repositories 搜索 Julia,然后点击 Install 进行安装 安装完重启一下 ...

  4. flask系列五之flask_script

    1.一个简单的例子 在工程里面新建一个Python文件命名为manage.py (1)安装flask_script包,然后引入 from flask_script import Manager fro ...

  5. 不需要SDK调用图灵机器人的方法

    图灵机器人的调用其实就是你给服务器发一个文字消息过去,他回你一个,看起来模仿人类对话一样. 不知道为什么要弄个SDK这么麻烦的方法,以前的接口官网上已经没有了,但是还是可以用的.返回的是JSON但也懒 ...

  6. 利用 Flask+Redis 维护 IP 代理池

    代理池的维护 目前有很多网站提供免费代理,而且种类齐全,比如各个地区.各个匿名级别的都有,不过质量实在不敢恭维,毕竟都是免费公开的,可能一个代理无数个人在用也说不定.所以我们需要做的是大量抓取这些免费 ...

  7. 微信开发准备(四)--nat123内网地址公网映射实现

    转自:http://www.cuiyongzhi.com/post/37.html 在前面几篇中我们一直说的开发准备工作主要是基于开发框架上的,这里我们说的就逐渐接近开发过程中的实体操作了,如果你之前 ...

  8. 简单的so修改

    今天有点小高兴哈,终于能修改so了 虽然只是hello,word..改成了.come,on,men.. 但是感觉也不错了. 只用两个工具. 1.盗版的ida定位可疑代码地址. 2.盗版的ultralE ...

  9. java StirngStringbufferStringbuild的区别

    java StirngStringbufferStringbuild的区别  String 1,Stirng是对象不是基本数据类型 2,String是final类,不能被继承.是不可变对象,一旦创建, ...

  10. python selenium环境配置Firefox和Chrome

    1.下载Selenium库,可以使用pip install selenium https://pypi.python.org/pypi/selenium/ 2.下载驱动 Chrome: https:/ ...