关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

云南大王-react嵌套路由

发布时间:2020-04-16 00:00:00
1、结构目录 2、路由配置文件,参照的vue-router config.js import Login from '../view/Login.js'; import System from '../view/System.js'; import Bus from '../view/Bus.js'; import Bus22 from '../view/Bus22.js'; const routes = [ { path: "/", component: Login, exact: true, }, { path: "/system", component: System, auth:true, routes: [ { path: "/system/bus", component: Bus, exact: true, auth:true, }, { path: "/system/bus22", component: Bus22, exact: true, auth:true, }, ] } ]; export default routes; 3、路由主体,使用react-router-dom,详细文档里面也有其它的例子和API import routes from './config'; import React, {Component} from 'react'; import { BrowserRouter as Router, Switch, Route, Redirect, } from "react-router-dom"; /*一级路由*/ class First extends Component { render() { return ( {routes.map((route, i) => { if (route.auth) {//根据配置是否检测登录 return ( ) } else { return () } } )} ); } } /*二级路由*/ class SystemRouter extends Component { render() { return ( {routes[1].routes.map((route, i) => { if (route.auth) {//根据配置是否检测登录 return ( ) } else { return () } })} ); } } export { First, SystemRouter }; // A special wrapper for that knows how to // handle "sub"-routes by passing them in a `routes` // prop to the component it renders. /*开放路由*/ function RouteWithSubRoutes(route) { return ( ( // pass the sub-routes down to keep nesting )} /> ); } /*登录检测路由*/ function PrivateRoute({children, ...rest}) { let isAuthenticated = sessionStorage.auth; return ( isAuthenticated ? ( children ) : ( ) } /> ); } 4、一级路由的使用,在App.js import React from 'react'; import './App.css'; import {First} from './router/index'; function App() { return ( ); } export default App; 5、二级路由的使用,在一级路由的组件文件中,本例是System.js import React,{Component} from 'react'; import {SystemRouter} from '../router/index'; import { withRouter } from "react-router-dom"; import { Menu, Icon } from 'antd'; const { SubMenu } = Menu; class System extends Component { componentDidMount() { } handleClick = e => { this.props.history.push(e.key) }; render() { return (
嵌套路由
Navigation One } > bus bus22
); } } export default withRouter(System); 最后来俩效果图,页面分三部分,头部、左侧导航、右侧内容,切换时只有右侧内容变化。        

相关阅读

Redis基础通用操作指令有哪些?String、StringBuffer和StringBuilder的各自用法常见的一些Dos命令有哪些?如何在C#中复制一个Windows窗体类前端js中的运算符的种类,=、==与===的有何区别?网站前端怎么设置页面禁止转载?解决XSS脚本攻击恶意代码的方法你知道?javascript 之 apply()、call() 探索net core实现跨域ASP.NET Core程序部署到LinuxASP.NET Core使用AutoMapper.NET Core:处理全局异常.NET Core在ASP.NET Core WebApi中使用CookieASP.NET Core:ASP.NET Core中使用NLog记录日志如何重启iis服务器SQL Server代理服务无法启动怎么办js 判断手机版与PC版自适应跳转升级版 PC版手机版界面对应跳转IIS服务器SSL证书安装js 判断手机版与PC版自适应跳转C#截取字符串的方法C# 中使用正则表达式验证手机号、身份证号码强制性修改div框里出现的css值VS2017调试代码显示“当前无法命中断点,还没有为该文档加载任何符号”js获取当前域名、Url、相对路径和参数以及指定参数JavaScript数组整理C# 对象和类型总结关于javascript跳转与返回和刷新页面Express中的中间件简介及用法JS的原型和继承webstorm的 Emmet 快捷方式什么是Redis缓存的雪崩、击穿、穿透Cookie的基本介绍和场景Vue.js中keep-alive缓存(页面+滚动条)HTML5在客户端是如何存储数据的?MySQL中多表操作有哪些?Cookie与Session的认识使用集合组织相关数据深入C#数据类型c#中的委托简单认识.NET框架密码学系列——常见的加密方式有哪些.NET 异步详解线程池的五种实现方式centos7系统中忘记了root管理员账号密码的解决方式公司管理必须的20条军规[参考]云南昆明天猫旗舰店如何开_怎么开_要什么条件云南大王-通俗理解spring源码(三)—— 获取xml的验证模式 云南大王-用户登录 云南大王-【Golang进阶】指针的详细讲解 云南大王-Java 单线程代码ThreadLocal串值问题 云南大王-Java 实例级别的锁和类级别的锁 云南大王-工作流引擎会签,加签,主持人,组长模式专题讲解 云南大王-Android连载5云南大王-NTP对时器(NTP对时服务器)重要性!京准电子科技 云南大王-关于redis单线程的分析 云南大王-CVE云南大王-PHP SESSION反序列化本地样例分析 云南大王-这不就是多线程ThreadPoolExecutor和阻塞队列吗 云南大王-Tomcat AJP 文件包含漏洞(CVE云南大王-讲真,这两款idea插件,能治愈你英语不好的病 云南大王-消息中间件ActiveMQ、RabbitMQ、RocketMQ、ZeroMQ、Kafka如何选型? 云南大王-JVM系列十三(类加载器). 云南大王-Win10安装MySQL8压缩包版 云南大王-初始WebApi(2) 云南大王-初识人工智能(二):机器学习(一):sklearn特征抽取 云南大王-Popup中ListBox的SelectChange事件关闭弹出窗体后主窗体点击无效BUG 云南大王-基础知识记录 云南大王-FastDFS搭建图片服务器 云南大王-git/sourcetree解决本地仓库历史合并到线上仓的历史数据合并问题_refusing to merge unrelated histories 云南大王-js判断字符是否在数组中【转】 云南大王-Python 云南大王-面向对象之多线程(可捎带电梯调度) 云南大王-Python练习题2.5求奇数分之一序列前N项和(存在问题) 云南大王-React 中的前端路由 react云南大王-VSCODE 远程开发树莓派 云南大王-React新闻网站云南大王-vs .net CS0006 C# 未能找到元数据文件 .dll 云南大王-Vue.js 技术揭秘 云南大王-流程控制语句云南大王-Python学习笔记:Python的时间操作(time,datetime,timedelta,calendar) 云南大王-流程控制语句云南大王-golang Gin framework with websocket 云南大王-多重判断if..else嵌套语句 云南大王-用户登录 云南大王-流程控制语句云南大王-密码类 云南大王-Unity2018发布WebGL注意事项总结 云南大王-web系统安全运营之基础云南大王- 流程控制语句云南大王-中型WPF客户端开发项目总结(3.3.4) 云南大王-流程控制语句云南大王-流程控制语句云南大王-流程控制语句云南大王-中型WPF客户端开发项目总结(4) 云南大王-流程控制语句云南大王-ASP.NET Core笔记(4) 云南大王-C# 基础知识系列云南大王-让 .NET 轻松构建中间件模式代码(二) 云南大王-基于 HTML5 WebGL 的 水泥工厂可视化系统 云南大王-.NET Core 3 WPF MVVM框架 Prism系列之导航系统
/template/Home/Zkeys/PC/Static