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

这篇文章主要介绍了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 嵌套路由内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

以上就是react-router-dom 嵌套路由的实现的详细内容，更多请关注本站其它相关文章！