react实现同页面三级跳转路由布局


Posted in Javascript onSeptember 26, 2019

本文实例为大家分享了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'>
          <h3>一级导航</h3>
          <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>
      <h2>我是首页</h2>
    </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>
          <h3>视频教程</h3>
          <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 (
    <h2>
      我是Flutter
    </h2>
  )
}
 
export default Flutter
//三级路由
import React from 'react'
 
function ReactPage(){
  return (
    <h2>
      我是react
    </h2>
  )
}
 
export default ReactPage
..

其余二级三级页面类似

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中setTimeout使用指南
Jul 26 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
详解Js模块化的作用原理和方案
Apr 29 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 #Javascript
小程序调用微信支付的方法
Sep 26 #Javascript
细说webpack6 Babel的使用详解
Sep 26 #Javascript
微信小程序实现拖拽功能
Sep 26 #Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 #Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 #Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 #Javascript
You might like
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Sanic框架Cookies操作示例
2018/07/17 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
pandas中ix的使用详细讲解
2020/03/09 Python
python 连续不等式语法糖实例
2020/04/15 Python
python 元组的使用方法
2020/06/09 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
2014年三八妇女节活动总结
2014/03/01 职场文书
学校班班通实施方案
2014/06/11 职场文书
初中班长竞选稿
2015/11/20 职场文书
PyTorch的Debug指南
2021/05/07 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技