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

一级路由布局组件：

//嵌套路由小案例布局页面一级路由从"反应"导入反应从"反应-路由器多姆导入{浏览器作为路由器、路由、链接}引入路由要用的组件从""导入索引/Index' //二级路由首页从""导入视频/视频'//二级路由视频从""导入工作场所./Workplace//二级路由职场"进口"。/Router.css' //假设是后端获取的动态路由function AppRouter(){ let route config=[{ path : '/'，title: '博客首页，exact:true，component:Index}，{path:'/video '，title: '视频教程，exact:false，component:Video}，{path:'/workplace '，title: '职场技能，exact:false，component:Workplace}，] return(Router div类名='mainDiv' {/*左侧导航部分*/} div类名='leftNav' h3一级导航/h3 ul {/*渲染动态路由*/} { routeConfig.map((项，索引)={ return (li键={ index }链接到={ item。路径{ item }。title }/Link/Li)}/ul/div {/*右侧显示部分*/} div类名='右主' {路由配置。映射((项目，索引)={返回(路由键={索引}精确={项目。精确}路径={ item。路径}组件={ item。组件}/)}/div/div/Router)}导出默认的近似器布局css:

车身{ padding: 0pxmargin: 0px }。mainDiv { display: flex宽度： 100%;}.左NaV { width : 16%；背景-color : # c0c 0 c 0；color : # 333 font-size :24 px；高度： 1000像素；padding: 20px }。右主{宽度： 84%；高度高度：1000像素背景-color : # fff；font-size :20 px}二级路由首页组件

//首页二级路由导入反应，{组件}从反应类索引扩展组件{构造函数(道具){ super(道具);这个。state={ } } render(){ return(div H2我是首页/H2/div)；}}导出默认索引；二级路由视频组件

//视频页面二级路由从“反应”导入反应从“react-router-dom”导入{路线，链接}”从"导入ReactPage ./video/ReactPage "从导入颤动./video/Flutter'import Vue from ' ./video/Vue“import ”./Video.css '函数Video(){ return(div类名=' TopNav ' ul LiLink to='/Video/React page/' React '教程/Link/Li Li链接到='/视频/颤动/'颤动教程/Link/Li Li链接到='/video/Vue/'Vue教程/Link/Li/ul/div类名='视频内容' div视频教程/h3路由路径='/video/reactpage/'组件={ReactPage} /路由路径='/视频/颤动/'组件={颤振} /路由路径='/video/Vue/'组件={Vue}//div /div /div )}导出默认视频三级路由视频子页面

//三级路由从"反应"函数颤振()导入反应（返回(h2我是颤动/h2 )}导出默认颤动/三级路由从“反应”函数ReactPage()导入反应(返回(h2我是反应/h2 )}导出默认ReactPage.其余二级三级页面类似

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