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 ( path={route.path}

component={(props) => { return (

) }} >

{/* */} )

} else { return ( key={key}

path={route.path}

component={(props) => { 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

其他页⾯index.jsx：

import React, { Component } from \"react\"export default class Index extends Component { render() {

return

其他页⾯UserAdd.jsx：

import React, { Component } from \"react\"

export default class UserAdd extends Component { render() {

return

其他页⾯UserList.jsx：

import React, { Component } from \"react\"

export default class UserList extends Component { render() {

return

到此这篇关于react-router-dom 嵌套路由的实现的⽂章就介绍到这了,更多相关react 嵌套路由内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！