react-router-dom 嵌套路由的实现

 更新时间:2020年05月02日 10:28:37   作者:易函123  
这篇文章主要介绍了react-router-dom 嵌套路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

入口文件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"))
}

各个文件的详细位置:

主要目录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 嵌套路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • 关于React Native使用axios进行网络请求的方法

    关于React Native使用axios进行网络请求的方法

    axios是一个基于Promise的Http网络库,可运行在浏览器端和Node.js中,Vue应用的网络请求基本都是使用它完成的。这篇文章主要介绍了React Native使用axios进行网络请求,需要的朋友可以参考下
    2021-08-08
  • React创建组件的三种方式及其区别

    React创建组件的三种方式及其区别

    本文主要介绍了React创建组件的三种方式及其区别,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • react-native动态切换tab组件的方法

    react-native动态切换tab组件的方法

    在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.这篇文章主要介绍了react-native动态切换tab组件的方法,非常具有实用价值,需要的朋友可以参考下
    2018-07-07
  • react中实现搜索结果中关键词高亮显示

    react中实现搜索结果中关键词高亮显示

    这篇文章主要介绍了react中实现搜索结果中关键词高亮显示,使用react实现要比js简单很多,方法都是大同小异,具体实现代码大家跟随脚本之家小编一起看看吧
    2018-07-07
  • 详解react-native-fs插件的使用以及遇到的坑

    详解react-native-fs插件的使用以及遇到的坑

    本篇文章主要介绍了react-native-fs插件的使用以及遇到的坑,详细的介绍了react-native-fs安装使用,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • 老生常谈js-react组件生命周期

    老生常谈js-react组件生命周期

    下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • react.js 父子组件数据绑定实时通讯的示例代码

    react.js 父子组件数据绑定实时通讯的示例代码

    本篇文章主要介绍了react.js 父子组件数据绑定实时通讯的示例代码,
    2017-09-09
  • 使用Jenkins部署React项目的方法步骤

    使用Jenkins部署React项目的方法步骤

    这篇文章主要介绍了使用Jenkins部署React项目的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 浅谈react路由传参的几种方式

    浅谈react路由传参的几种方式

    这篇文章主要介绍了浅谈react路由传参的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • React中this丢失的四种解决方法

    React中this丢失的四种解决方法

    这篇文章主要给大家介绍了关于React中this丢失的四种解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者使用React具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03

最新评论