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 相关文章推荐
prototype class详解
Sep 07 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
浅谈Vue数据响应
Nov 05 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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+curl 发送图片处理代码分享
2015/07/09 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
javascript数组组合成字符串的脚本
2021/01/06 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python requests指定出口ip的例子
2019/07/25 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
Linux内核产生并发的原因
2016/11/08 面试题
领导干部培训感言
2014/01/23 职场文书
对学校的意见和建议
2015/06/04 职场文书
中学团支部工作总结
2015/08/13 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript