react实现同页面三级跳转路由布局
编程学习 2021-07-04 15:01www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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'>
{/* 左侧导航部分 *