react动态路由以及获取动态路由
业务中会遇到点击列表跳转到详情页,
1.在index.js修改我们的跟组件


新建router2的文件
import React from 'react'
import {
HashRouter as Router,
Route,
// Link,
Switch
} from 'react-router-dom'
import Main from './main'
import Info from './info'
import About from './../router1/about'
import Topic from './../router1/topic'
import Home from './home'
exact是精准匹配有时候会造成路由出不来
export default class IRouter extends React.Component {
render() {
return ( <Router >
{/* <Home > */}
<Switch >
< Route exact path = "/"
component = {
Home
} />
< Route path = "/main"
render = {
() =>
< Main >
<Route path = "/main/:value"
component = {
Info
} >
</Route>
</Main>
} > </Route> <Route path = "/about"
component = {
About
} > </Route> <Route exact = {
true
}
path = "/about/abc"
component = {
About
} > </Route> <Route path = "/topics"
component = {
Topic
} > </Route>
</Switch>
{/* </Home> */}
</Router>
);
}
}
router后面直接加组件Home会报错


main.js文件中

home.js中,是默认页面

info.js作为动态组件的接收值,通过this.props.match.params.value来接收值


react动态路由以及获取动态路由的更多相关文章
- vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
- 【原创】一篇学会vue路由配置 、 动态路由 、多层路由(实例)
先来看看效果图: 为了方便讲解,我没有使用vue脚手架,如果需要的,可以留言跟我要.不多说开工: 首先,html先组上 <div id="app"> <div&g ...
- vue管理平台的动态路由(后台传递路由,前端拿到并生成侧边栏)
前端的路由从后台获取,包括权限: 大体步骤包括:路由拦截(钩子函数)---->后台获取路由数据 ----> 保存到本地或vuex中. 在router-->index.js中: rou ...
- VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)
vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...
- CCNP路由实验之六 动态路由协议之IS-IS
CCNP路由实验之六动态路由协议之IS-IS 动态路由协议能够自己主动的发现远程网络.仅仅要网络拓扑结构发生了变化.路由器就会相互交换路由信息,不仅能够自己主动获知新添加的网络.还能够在当前网络 ...
- CCNP路由实验之七 动态路由之BGP
CCNP路由实验之七 动态路由之BGP 动态路由协议能够自己主动的发现远程网络,仅仅要网络拓扑结构发生了变化,路由器就会相互交换路由信息,不仅能够自己主动获知新添加的网络,还能够在当前网络连接失 ...
- React 性能优化之组件动态加载(react-loadable)
React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长. 所有,可以对组件进行异步加载处理,通常 ...
- React 系列 - 写出优雅的路由
前言 自前端框架风靡以来,路由一词在前端的热度与日俱增,他是几乎所有前端框架的核心功能点.不同于后端,前端的路由往往需要表达更多的业务功能,例如与菜单耦合.与标题耦合.与"面包屑" ...
- React通过dva-model-extend实现 dva 动态生成 model
前言 实现通过单个component 单个router通过相应的标识对应产生不同model实现数据包分离,model namespce将会覆盖基础的Model,其中的model[state|subsc ...
随机推荐
- [SNOI2017]炸弹
嘟嘟嘟 这题有一些别的瞎搞神奇做法,而且复杂度似乎更优,不过我为了练线段树,就乖乖的官方正解了. 做法就是线段树优化建图+强连通分量缩点+DAGdp. 如果一个炸弹\(i\)能引爆另一个炸弹\(j\) ...
- 关于 insufficient memory case 4 的解决记录
用户在上传图片的时候,系统会报异常 insufficient memory case 4,追踪代码发生在jdk中 image.io 的 read() 方法.这是一个耽搁了很久的bug,客户反馈了好几次 ...
- easyUI的常见属性
datagrid (数据表格) $("#tg").datagrid({url:"TaskList",//请求的地址fit: false, //当true时设置他 ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- 3 Eclipse 查看不了源码
Eclipse 查看源码时,报source not found问题,经查资料,需要配置环境变量才能查看到. 在用户变量或者系统变量下,配置CLASSPATH,值为JDK的lib路径:D:\Progra ...
- [转帖]windows10,business版和consumer版本区别
windows10,business版和consumer版本区别 时间:2018-07-08 10:50来源:原创 作者:5分享 点击: 7113 次 windows10系统(1803)busines ...
- Linux(Ubuntu)使用日记------Mongodb的安装与使用
1.安装 Linux下安装mongodb还是比较容易的 直接使用apt-get安装即可,命令如下: sudo apt-get install mongodb 安装完成之后进行检验, “mongo sh ...
- bugku crypto easy-crypto
长度不一的01字符串 就要考虑是不是摩斯密码 用这个py脚本: from __future__ import print_function a = input("input the stri ...
- 内存泄漏(Memory Leak)
什么情况下会导致内存泄露(Memory Leak)? Android 的虚拟机是基于寄存器的Dalvik,它的最大堆大小一般是16M,有的机器为24M.因此我们所能利用 的内存空间是有限的.如果我们的 ...
- Django相关问题
遇到models模型变动后无法用migrations生成改动后的表通过以下几个方面实现 1 python manage.py makemigrations yourapp(你改变的app) 2 p ...