这是一个笔记博客 有什么错误欢迎指正😁😁

路由表简介：

① 创建路由表以后需要在入口文件中修改路径 让路径指向路由表 通过路由表转发至各路由组件。

② 在引入各个路由组件 给它们创建类似于Vue中的路由表 

③ 创建路由表       

代码自取：

/* 
这是创建一个类似于路由表的组件  

为什么要做一个路由表组件？
    个人认为是因为 ： 这样增加了代码的可维护性 以及 代码的阅读性

实现原理：
    将原本index的根组件做为路由表组件的子组件 达到统一管理路由信息的目的
    在 index组件中 需要采用 this.props.children 的方式接受 需要渲染的组件

路由表组件中 需要用的组件及方法详解：
            react中解构：
                        Component : 这里是为了将自身的属性和方法继承给新创建的类组件
                        lazy :  作用 ==> 懒加载 这里主要做路由懒加载 ==> 性能优化的一种方式
                        suspense :  作用  ==> 加载过程中的提示信息（?.提示信息的组件）

            react-router-dom中解构：

                        Route : 作用 ==> 给对应路由渲染对应的组件
                        Switch :  作用 ==> 将React的路由从 包容性路由 ==> 排他性路由
                        Redirect : 作用 ==> 重定向
*/
import React, { Component, lazy, Suspense } from 'react';

/* 
    这里引入原来的渲染组件 
     通过路由表控制路由 就是在原来入口文件直接指向渲染组件的基础上，加了一个控制层（路由表）
*/
import App from "./index"
import { Route, Switch, Redirect } from "react-router-dom"


/* 这里是将其他的路由组件引入  这是使用了懒加载 */
const Home = lazy(() => import("./home/index"));
const Video = lazy(() => import("./video/index"));
const Svideo = lazy(() => import("./svideo/index"));
const Show = lazy(() => import("./show/index"));
const Mine = lazy(() => import("./mine/index"));


class Router extends Component {

    render() {
        return (
            <App>
                <Switch>
                    {/* 路由重定向 ==> 一级路由 */}
                    <Route path="/" exact>
                        {/* 路由重定向 ==> 一级路由 */}
                        <Redirect to={{ pathname: "/home" }}></Redirect>
                    </Route>
                    {/* 二级路由/home ==> Home组件 */}
                    <Route path='/home' state={{ active: "true" }}>
                        {/* 路由按需加载 ==> 懒加载 */}
                        <Suspense fallback={<div>loading...</div>}>
                            <Home></Home>
                        </Suspense>
                    </Route>

                    {/* 二级路由/video ==> Video组件 */}
                    <Route path='/video'>
                        {/* 路由按需加载 ==> 懒加载 */}
                        <Suspense fallback={<div>loading...</div>}>
                            <Video></Video>
                        </Suspense>
                    </Route>

                    {/* 二级路由/svideo ==> Svideo组件 */}
                    <Route path='/svideo'>
                        {/* 路由按需加载 ==> 懒加载 */}
                        <Suspense fallback={<div>loading...</div>}>
                            <Svideo></Svideo>
                        </Suspense>
                    </Route>

                    {/* 二级路由/show ==> Show组件 */}
                    <Route path='/show'>
                        {/* 路由按需加载 ==> 懒加载 */}
                        <Suspense fallback={<div>loading...</div>}>
                            <Show></Show>
                        </Suspense>
                    </Route>

                    {/* 二级路由/mine ==> Mine组件 */}
                    <Route path='/mine'>
                        {/* 路由按需加载 ==> 懒加载 */}
                        <Suspense fallback={<div>loading...</div>}>
                            <Mine></Mine>
                        </Suspense>
                    </Route>

                </Switch>
            </App>
        );
    }
}

export default Router;