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 应用技巧集合[推荐]
Aug 30 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JS二维数组的定义说明
Mar 03 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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中数据类型转换的三种方式
2015/04/02 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
python调用java的Webservice示例
2014/03/10 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python读取指定日期邮件的实例
2019/02/01 Python
PyTorch-GPU加速实例
2020/06/23 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
思想品德课教学反思
2014/02/10 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
四风问题查摆材料
2014/08/25 职场文书
运动会广播稿100字
2014/09/14 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript