使用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 ..

关于使用react怎么实现一个同页面三级跳转路由布局就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享名称:使用react怎么实现一个同页面三级跳转路由布局
转载注明:http://scyanting.com/article/gchhsg.html

其他资讯