react-router 4 路由的嵌套
1.在component组件内部需要嵌套的位置直接嵌套Route标签
这个方法会使得路由标签比较分散,子组件我们必须直接将Route标签写入到父组件之中,而且路由必须包含根路径.
// Dashboard.jsx
import Menu from '~/components/Menu/Menu';
import React from 'react';
import {Route,Switch} from "react-router-dom";
import Index from '~/container/Index/Index';
import TaskList from '~/container/TaskManage/TaskList/TaskList'
const routes = [
{
path: "/Dashboard/Index",
component: Index
},
{
path: "/Dashboard/TaskManage/TaskList",
component: TaskList
}
];
class Dashboard extends React.Component{
constructor(props, context ) {
super(props, context );
}
render(){
return(
<div>
<Menu/>
<div className='container'>
<div>
{routes.map((route, index) => (
<Route
exact
key={index}
path={route.path}
component={route.component}
/>
))}
</div>
</div>
</div>
)
}
}
export default Dashboard
2.使用Route render渲染作内联嵌套
component使用this.props.children进行嵌套渲染,Dashboard为父组件,Index和TaskList为子组件
// router.js
<Router history={history}>
<Switch>
<Route exact path="/" component={Login}/>
<Route path="/" render={({history,location,match}) => (
<Dashboard history={history} location={location} match={location}>
<Route path="/Dashboard/Index" component={Index}></Route>
<Route path="/Dashboard/TaskManage/TaskManageIng" component={TaskManageIng}></Route>
<Route path="/Dashboard/TaskManage/TaskList" component={TaskList}></Route>
<Route path="/Dashboard/TaskManage/TaskResource" component={TaskResource}></Route>
</Dashboard>
)} />
</Switch>
</Router>
// Dashboard.jsx
import Menu from '~/components/Menu/Menu';
import React from 'react';
class Dashboard extends React.Component{
constructor(props, context ) {
super(props, context );
}
render(){
return(
<div>
<Menu/>
<div className='container'>
<div>
{this.props.children}
</div>
</div>
</div>
)
}
}
export default Dashboard
react-router 4 路由的嵌套的更多相关文章
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- React 实践记录 03 React router
Introduction 本文主要参考了react router 的官方文档. React Router是一套完整的配合React的路由解决方案,可能你已经知道前端路由,或者知道后端有路由的概念,如下 ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React初识整理(四)--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- < react router>: (路由)
< react router> (路由): 思维导图: Atrial 文件夹下的index.js 文件内容: import React, { Component } from 'rea ...
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- react router @4 和 vue路由 详解(五)react怎么通过路由传参
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...
随机推荐
- Software-Defined Networking:A Comprehensive Survey--Day3
(接Day2的内容 +2s) E. Layer V: Northbound Interfaces 南行接口已经得到广泛接受(OpenFlow),但现在就定义北向接口还为时尚早,开发不同的控制器经验一定 ...
- [置顶网]POWER 9为云与智能打造强大引擎
POWER 9为云与智能打造强大引擎 关键字: 浪潮商用机器 POWER9 至顶网服务器频道 (文/董培欣): 从全球角度看,政治经济波动持续.逆全球化趋势抬头.技术加速变革商业等因素促使企业需要数字 ...
- 深入 Java Web
该系列 记录下,深入 学习 Java Web 过程. 1.Tomcat总体结构 2.Tomcat 启动流程 3.ServletContext详解 4.Servlet详解
- c++ std::function
std::function 是一个模板类,用于封装各种类似于函数这样的对象,例如普通函数,仿函数,匿名函数等等.其强大的多态能力,让其使用只依赖于调用特征.在程序的升级中,可以实现一个调用表,以兼容新 ...
- poj 2528 (线段树+特殊离散化)
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 51098 Accepted: 14788 ...
- MT【75】考察高斯函数的一道高考压轴题
解答:答案1,3,4. 这里关于高斯函数$[x]$的一个不等式是需要知道的$x-1<[x]\le x$,具体的:
- 洛谷P1155 双栈排序
这题什么毒瘤......之前看一直没思路,然后心说写个暴搜看能有多少分,然后就A了??! 题意:给你一个n排列,求它们能不能通过双栈来完成排序.如果能输出最小字典序方案. [update]这里面加了一 ...
- spring cloud微服务架构 服务提供者和服务消费者
服务提供者和服务消费者 下面这张表格,简单描述了服务提供者/消费者是什么: | 名词 | 概念 | | ----- | ----------------------- | | 服务提供者 | 服务 ...
- python操作txt文件中数据教程[3]-python读取文件夹中所有txt文件并将数据转为csv文件
python操作txt文件中数据教程[3]-python读取文件夹中所有txt文件并将数据转为csv文件 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 python操作txt文件中 ...
- Kafka 0.8 如何创建topic
1. 操作命令 bin/kafka-topics.sh --create --zookeeper localhost:2181 --replication-factor 3 --partitions ...