13518219792
这篇文章给大家介绍使用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}
)
})
}
布局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教程
视频教程
三级路由 视频 子页面
//三级路由
import React from 'react'
function Flutter(){
return (
我是Flutter
)
}
export default Flutter//三级路由
import React from 'react'
function ReactPage(){
return (
我是react
)
}
export default ReactPage
..关于使用react怎么实现一个同页面三级跳转路由布局就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
