react嵌套路由
程序员文章站
2022-06-22 07:55:45
1、结构目录 2、路由配置文件,参照的vue-router config.js import Login from '../view/Login.js'; import System from '../view/System.js'; import Bus from '../view/Bus.js' ......
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 ( <router> <switch> {routes.map((route, i) => { if (route.auth) {//根据配置是否检测登录 return ( <privateroute key={i} path={route.path}> <route.component/> </privateroute> ) } else { return (<routewithsubroutes key={i} {...route} />) } } )} </switch> </router> ); } } /*二级路由*/ class systemrouter extends component { render() { return ( <switch> {routes[1].routes.map((route, i) => { if (route.auth) {//根据配置是否检测登录 return ( <privateroute key={i} path={route.path}> <route.component/> </privateroute> ) } else { return (<routewithsubroutes key={i} {...route} />) } })} </switch> ); } } export { first, systemrouter }; // a special wrapper for <route> that knows how to // handle "sub"-routes by passing them in a `routes` // prop to the component it renders. /*开放路由*/ function routewithsubroutes(route) { return ( <route exact={route.exact} path={route.path} render={props => ( // pass the sub-routes down to keep nesting <route.component {...props} routes={route.routes}/> )} /> ); } /*登录检测路由*/ function privateroute({children, ...rest}) { let isauthenticated = sessionstorage.auth; return ( <route {...rest} render={({location}) => isauthenticated ? ( children ) : ( <redirect to={{ pathname: "/", state: {from: location} }} /> ) } /> ); }
4、一级路由的使用,在app.js
import react from 'react'; import './app.css'; import {first} from './router/index'; function app() { return ( <first/> ); } 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 ( <div> <header> 嵌套路由 </header> <menu onclick={this.handleclick} style={{ width: 256,float:'left' }} defaultselectedkeys={['1']} defaultopenkeys={['sub1']} mode="inline" > <submenu key="sub1" title={ <span> <icon type="mail" /> <span>navigation one</span> </span> } > <menu.item key="/system/bus">bus</menu.item> <menu.item key="/system/bus22">bus22</menu.item> </submenu> </menu> <systemrouter style={{ float:'left' }}/> </div> ); } } export default withrouter(system);
最后来俩效果图,页面分三部分,头部、左侧导航、右侧内容,切换时只有右侧内容变化。
转自:https://www.cnblogs.com/gxp69/p/12711412.html
上一篇: python中操作文件和目录
推荐阅读
-
关于SQL嵌套的误解分析
-
React Native自定义组件与输出方法详解
-
2014小米双12智能硬件专场:路由器、插座、摄像机
-
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
-
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
-
SQL Server误区30日谈 第26天 SQL Server中存在真正的“事务嵌套”
-
常用SQL语句(嵌套子查询/随机等等)详细整理
-
详解关于Vue2.0路由开启keep-alive时需要注意的地方
-
在Create React App中使用CSS Modules的方法示例
-
Python中在for循环中嵌套使用if和else语句的技巧