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 解析后的xml对象的读取方法细解
Jul 25 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 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 无限级数据JSON格式及JS解析
2010/07/17 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
python实现手机通讯录搜索功能
2018/02/22 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python装饰器用法实例分析
2019/01/14 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
linux面试相关问题
2013/04/28 面试题
最受欢迎的自我评价
2013/12/22 职场文书
2014企业年终工作总结
2014/12/23 职场文书
委托书英文
2015/01/28 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript