react实现同页面三级跳转路由布局

本文实例为大家分享了react实现同页面三级跳转路由布局的具体代码，供大家参考，具体内容如下

 一级路由+布局组件：

//嵌套路由小案例 布局页面一级路由
import React from 'react'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom' //引入路由要用的组件
import Index from './Index' //二级路由 首页
import Video from './Video' // 二级路由 视频
import Workplace from './Workplace' //二级路由 职场
import './Router.css'
 
//假设是后端获取的动态路由
function AppRouter(){
 let routeConfig = [
 {path:'/',title:'博客首页',exact:true,component:Index},
 {path:'/video',title:'视频教程',exact:false,component:Video},
 {path:'/workplace',title:'职场技能',exact:false,component:Workplace},
 ]
 return(
 <Router>
 <div className='mainDiv'>
 {/* 左侧导航部分 */}
 <div className='leftNav'>
 <h3>一级导航</h3>
 <ul>
 {/* 渲染动态路由 */}
 {
 routeConfig.map((item,index)=>{
 return (
 <li key={index}>
 <Link to={item.path}>{item.title}</Link>
 </li>
 )
 })
 }
 </ul>
 </div>
 {/* 右侧显示部分 */}
 <div className='rightMain'>
 {
 routeConfig.map((item,index)=>{
 return (
 <Route key={index} exact={item.exact} path={item.path} component={item.component} />
 )
 }) 
 }
 </div>
 </div>
 </Router>
 )
}
 
export default AppRouter

布局css：

body{
 padding: 0px;
 margin: 0px;
}
 
.mainDiv{
 display: flex;
 width: 100%;
}
.leftNav{
 width: 16%;
 background-color: #c0c0c0;
 color:#333;
 font-size:24px;
 height: 1000px;
 padding: 20px;
}
.rightMain{
 width: 84%;
 height:1000px;
 background-color: #fff;
 font-size:20px;
}

二级路由 首页组件

//首页 二级路由
 
import React,{Component} from 'react'
 
class Index extends Component {
 constructor(props) {
 super(props);
 this.state = { }
 }
 render() { 
 return ( 
 <div>
 <h2>我是首页</h2>
 </div> 
 );
 }
}
 
export default Index;

二级路由 视频组件

//视频页面 二级路由
 
import React from 'react'
import { Route, Link} from 'react-router-dom'
import ReactPage from './video/ReactPage'
import Flutter from './video/Flutter'
import Vue from './video/Vue'
import './Video.css'
 
function Video(){
 return(
 <div>
 <div className='topNav'>
 <ul>
 <li><Link to='/video/reactpage/'>React教程</Link></li>
 <li><Link to='/video/Flutter/'>Flutter教程</Link></li>
 <li><Link to='/video/Vue/'>Vue教程</Link></li>
 </ul>
 </div>
 <div className='videoContent'>
 <div>
 <h3>视频教程</h3>
 <Route path='/video/reactpage/' component={ReactPage} />
 <Route path='/video/Flutter/' component={Flutter} />
 <Route path='/video/Vue/' component={Vue} />
 </div>
 </div>
 </div> 
 )
}
 
export default Video

 三级路由 视频 子页面

//三级路由
import React from 'react'
 
function Flutter(){
 return (
 <h2>
 我是Flutter
 </h2>
 )
}
 
export default Flutter

//三级路由
import React from 'react'
 
function ReactPage(){
 return (
 <h2>
 我是react
 </h2>
 )
}
 
export default ReactPage
..

其余二级三级页面类似

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。