使用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}
                  
                )
              })
            }