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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
javascript 自定义事件初探
Aug 21 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 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文件上传你必须知道的几点
2015/10/20 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP中16个高危函数整理
2019/09/19 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
两道JAVA笔试题
2016/09/14 面试题
车间组长岗位职责
2013/12/20 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
先进集体事迹材料
2014/02/17 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
培训通知书模板
2015/04/17 职场文书