使用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'>
        {/* 左側導航部分 */}
        <div className='leftNav'>
          <h4>一級導航</h4>
          <ul>
            {/* 渲染動態路由 */}
            {
              routeConfig.map((item,index)=>{
                return (
                  <li key={index}>
                    <Link to={item.path}>{item.title}</Link>
                  </li>
                )
              })
            }
          </ul>
        </div>
        {/* 右側顯示部分 */}
        <div className='rightMain'>
          {
           routeConfig.map((item,index)=>{
            return (
              <Route key={index} exact={item.exact} path={item.path} component={item.component} />
            )
          }) 
          }
        </div>
      </div>
    </Router>
  )
}
 
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 ( 
    <div>
      <h3>我是首頁</h3>
    </div> 
    );
  }
}
 
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(
    <div>
      <div className='topNav'>
        <ul>
          <li><Link to='/video/reactpage/'>React教程</Link></li>
          <li><Link to='/video/Flutter/'>Flutter教程</Link></li>
          <li><Link to='/video/Vue/'>Vue教程</Link></li>
        </ul>
      </div>
      <div className='videoContent'>
        <div>
          <h4>視頻教程</h4>
          <Route path='/video/reactpage/' component={ReactPage} />
          <Route path='/video/Flutter/' component={Flutter} />
          <Route path='/video/Vue/' component={Vue} />
        </div>
      </div>
    </div>  
  )
}
 
export default Video

 三級路由 視頻 子頁面

//三級路由
import React from 'react'
 
function Flutter(){
  return (
    <h3>
      我是Flutter
    </h3>
  )
}
 
export default Flutter

//三級路由
import React from 'react'
 
function ReactPage(){
  return (
    <h3>
      我是react
    </h3>
  )
}
 
export default ReactPage
..

關于使用react怎么實現一個同頁面三級跳轉路由布局就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。