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 相关文章推荐
JS字符串处理实例代码
Aug 05 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
如何编写jquery插件
2017/03/29 jQuery
webpack引入eslint配置详解
2018/01/22 Javascript
Vue实现日历小插件
2019/06/26 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python发送告警邮件脚本
2018/09/17 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python如何急速下载第三方库详解
2020/11/02 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
ktv中秋节活动方案
2014/01/30 职场文书
动员大会主持词
2014/03/20 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
简历自荐信范文
2015/03/09 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL