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

时间:2021-05-26

入口文件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> ) } else { return ( <Route key={key} path={route.path} component={(props) => { return ( <route.component {...props} routes={route.routes} /> ) }} > {} </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 嵌套路由内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章