react-router-dom 嵌套路由的实现


Posted in Javascript onMay 02, 2020

入口文件index.js:

import React from "react"
import ReactDOM from "react-dom"
import App from "./App.jsx"
import "babel-polyfill"
const root = document.getElementById("app")
if (root !== null) {
 ReactDOM.render(<App />, document.getElementById("app"))
}

各个文件的详细位置:

react-router-dom 嵌套路由的实现

主要目录App.jsx:

import React, { Fragment, Component } from "react"
import {
 BrowserRouter as Router,
 Switch,
 Route,
 NavLink,
 Redirect,
 Link,
 withRouter,
} from "react-router-dom"
// 开始引入各种自定义的组件
import Index from "./pages/platform/index"
//404页面
import ErrorPage from "./pages/ErrorPage"
import Login from "./pages/login/index"
import routes from "./routes/index"


class BaseLayout extends Component {
 constructor(props) {
  super(props)
  }
  
  render(){
    return(
    <Fragment>
      <ul>
     {routes.map((val,index))=>{
       return(
       <li key={index}>
       <Link to={val.path}>{val.authName}</Link>
       </li>
       )
     }
    </ul>
      
       <Switch>
        {routes.map((route, key) => {
         if (route.exact) {
          return (
           <Route
            key={key}
            exact
            path={route.path}
            component={(props) => {
             return (
              <route.component {...props} routes={route.routes} />
             )
            }}
           >
            {/* <route.component /> */}
           </Route>
          )
         } else {
          return (
           <Route
            key={key}
            path={route.path}
            component={(props) => {
             return (
              <route.component {...props} routes={route.routes} />
             )
            }}
           >
            {/* <route.component /> */}
           </Route>
          )
         }
        })}
        <Route path="/">
         <Index />
        </Route>
        <Route path="*">
         <ErrorPage />
        </Route>
       </Switch>
    </Fragment>
    )
  } 
}

class App extends React.Component {
 constructor(props) {
  super(props)
 }
 render() {
  return (
    <Router>
     <Switch>
      <Route path="/login">
       <Login />
      </Route>
      <Route path="/">
       <BaseLayout />
      </Route>
       <!--<Route path="*">-->
       <!--   <ErrorPage />-->
       <!--  </Route>-->
     </Switch>
    </Router>
  )
 }
}

export default App

放路由route.js:

import Index from "../pages/platform/index"
import UserAdd from "../pages/component/User/UserAdd"
import UserList from "../pages/component/User/UserList"

const routes = [
 {
  path: "/index",
  authName: "首页",
  component: Index,
  exact: true,
 },
 {
  path: "/user",
  authName: "用户1",
  component: UserList,
 },
 {
  authName: "用户2",
  path: "/userAdd",
  component: UserAdd,
 },
]
export default routes

其他页面login.jsx:

import React, { Component } from "react"

export default class Login extends Component {
 render() {
  return <div>Login</div>
 }
}

其他页面index.jsx:

import React, { Component } from "react"

export default class Index extends Component {
 render() {
  return <div>Index</div>
 }
}

其他页面UserAdd.jsx:

import React, { Component } from "react"

export default class UserAdd extends Component {
 render() {
  return <div>UserAdd</div>
 }
}

其他页面UserList.jsx:

import React, { Component } from "react"

export default class UserList extends Component {
 render() {
  return <div>UserList</div>
 }
}

到此这篇关于react-router-dom 嵌套路由的实现的文章就介绍到这了,更多相关react 嵌套路由内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
采用call方式实现js继承
May 20 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
JS数组去重详情
Nov 07 Javascript
在react中使用vue的状态管理的方法示例
May 02 #Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 #Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 #Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
JS深入学习之数组对象排序操作示例
May 01 #Javascript
You might like
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php数组键值用法实例分析
2015/02/27 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python中实现switch功能实例解析
2018/01/11 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python unichr函数知识点总结
2020/12/16 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
环保标语大全
2014/06/12 职场文书
网站出售协议书范文
2014/10/10 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
MySQL实现配置主从复制项目实践
2022/03/31 MySQL