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

时间紧急，先写下这个做笔记