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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
Three.js快速入门教程
Sep 09 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php密码生成类实例
2014/09/24 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
python3调用R的示例代码
2018/02/23 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python matplotlib可视化实例解析
2020/06/01 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
文明单位创建材料
2014/12/24 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
超市主管竞聘书
2015/09/15 职场文书