react-router-dom 嵌套路由的实现
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了react-router-dom 嵌套路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
入口文件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}
ponent={(props) => {
return (
<route.ponent {...props} routes={route.routes} />
)
}}
>
{/ <route.ponent />