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

从零开始学习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 的知识在第一节推荐的文档上有说明！

查看效果

当前目录结构

结尾

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