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(
    
      
 {}
 
   一级导航
   

     {}
     {
routeConfig.map((item,index)=>{
  return (
    

      {item.title}
    
  )
})
     }
   
 
 {}
 
   {
    routeConfig.map((item,index)=>{
     return (

     )
   }) 
   }
 
      
    
  )
}
 
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 ( 
    
      我是首页
     
    );
  }
}
 
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(
    
      
 

   
React教程
   
Flutter教程
   
Vue教程
 
      
      
 
   视频教程
   
   
   
 
      
      
  )
}
 
export default Video

 三级路由 视频 子页面

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

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

其余二级三级页面类似

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