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 组件之旅(一)分析和设计
Oct 28 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
浅谈webpack-dev-server的配置和使用
May 17 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
QML实现圆环颜色选择器
Sep 25 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
长波有什么东西
2021/03/01 无线电
PHP实现的折半查找算法示例
2017/12/19 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
javascript中常用编程知识
2013/04/08 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
python重试装饰器示例
2014/02/11 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python 变量初始化空列表的例子
2019/11/28 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
素质教育标语
2014/06/27 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers