从零开始学习ReactJS – 03 – 路由嵌套必须的学啊！

路由嵌套配置

路由嵌套是非常常用的配置，例如管理后台中，对于很多内容页面都是在同一个框架下，一般都是首页包含了头部、侧导航、底部信息等内容，然后在首页中间进行嵌套功能页面，这样达到了复用与开发上的便利

开始配置

上代码 改造了 src/router/index.js

import React from 'react' import Loadable from 'react-loadable' import {BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom' import NotFound from '../pages/NotFound/NotFound' function Loading(){ return <div>Loading</div> } const Home = Loadable({ loading: Loading, loader: () => import('../pages/Home/Home') }) const Login = Loadable({ loading: Loading, loader: () => import('../pages/Login/Login') }) const Board = Loadable({ loading: Loading, loader: () => import('../pages/Board/Board') }) class IRouter extends React.Component{ render(){ return ( <Router> <Switch> <Route path="/login" component={Login} /> //注意这里是重点哦 首页组件与嵌套 <Route path="/" component={(props) => { return <Home> //被嵌套的页面 <Route path="/board" exact component={Board} /> </Home> }} /> {/* 404页面 */} <Route path="*" component={NotFound} /> </Switch> <li><Link to="/">Home</Link></li> <li><Link to="/login" >Login</Link></li> </Router> ) } } export default IRouter

通过箭头函数来进行加载嵌套页面 重点在于在首页component={() => {...}} 这样通过箭头函数来加载 改造首页代码 src/pages/Home/Home.js

import React from 'react' class Home extends React.Component{ constructor(props){ super(props); this.state = {} } render(){ return ( <div> This is Home Layout {/* 这里是嵌套页面 */} {this.props.children} </div> ) } } export default Home;

这里涉及到了this.props.children 的知识在第一节推荐的文档上有说明！

查看效果

当前目录结构

结尾

嵌套路由就实现了 接下来进行学习路由配置的优化提取 这样都放在一起太乱了