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最常用与实用的创建类的代码
Aug 12 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
echarts浮动显示单位的实现方法示例
Dec 04 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 变量类型的强制转换
2009/10/23 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
一名毕业生的自我鉴定
2013/12/04 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
关爱留守儿童标语
2014/06/18 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书