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(, 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(
    
      

     {routes.map((val,index))=>{
return(

{val.authName}

)
     }
    
      

 {routes.map((route, key) => {
  if (route.exact) {
   return (
     {
      return (

      )
     }}
    >
     {}
    
   )
  } else {
   return (
     {
      return (

      )
     }}
    >
     {}
    
   )
  }
 })}
 
  
 
 
  
 

    
    )
  } 
}

class App extends React.Component {
 constructor(props) {
  super(props)
 }
 render() {
  return (
    
     
      

      
      

      



     
    
  )
 }
}

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 Login
 }
}

其他页面index.jsx：

import React, { Component } from "react"

export default class Index extends Component {
 render() {
  return Index
 }
}

其他页面UserAdd.jsx：

import React, { Component } from "react"

export default class UserAdd extends Component {
 render() {
  return UserAdd
 }
}

其他页面UserList.jsx：

import React, { Component } from "react"

export default class UserList extends Component {
 render() {
  return UserList
 }
}

到此这篇关于react-router-dom 嵌套路由的实现的文章就介绍到这了,更多相关react 嵌套路由内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！