【react】 react---项目的-----------简单路由配置

 pages>index.js   （路由的懒加载）

//路由的懒加载
import Loadable from "react-loadable"
import Loading from "../common/loading"

const Home = Loadable({
    loader:()=>import("./home"),
    loading:Loading
})

const List = Loadable({
    loader:()=>import("./list"),
    loading:Loading
})

const Login = Loadable({
    loader:()=>import("./login"),
    loading:Loading
})

const Mine = Loadable({
    loader:()=>import("./mine"),
    loading:Loading
})

const Order = Loadable({
    loader:()=>import("./order"),
    loading:Loading
})


const INow = Loadable({
    loader:()=>import("../components/iNow"),
    loading:Loading
})


const Comming = Loadable({
    loader:()=>import("../components/comming"),
    loading:Loading
})


export {
    Home,
    List,
    Login,
    Mine,
    Order,
    INow,
    Comming
}

router》index.js   路由的配置表

import {
    Home,
    List,
    Login,
    Mine,
    Order,
    INow,
    Comming
} from "../pages"



//路由配置表

//tabBar 的路由数组
export const TabBarRoutes = [  
    {
        id:1,
        path:"/home",
        icon:"ue717",
        name:"首页",
        component:Home,
        meta:{
            auth:false
        },
        children:[  //二级路由
            {
                path:"/home/iNow",
                component:INow,
                name:"正在热映",
            },
            {
                path:"/home/comming",
                component:Comming,
                name:"即将上映",
            }
        ]
    },
    {
        key:2,
        path:"/list",
        icon:"ue61d",
        name:"列表",
        component:List,
        meta:{
            auth:false
        }
    },
    {
        key:3,
        path:"/order",
        icon:"ue605",
        name:"订单",
        component:Order,
        meta:{
            auth:true
        }
    },
    {
        key:4,
        path:"/mine",
        icon:"ue613",
        name:"我的",
        component:Mine,
        meta:{
            auth:true
        }
    }
]

//没有tabBar的路由数组
export const NoTabBarRoutes = [
    {
        key:5,
        path:"/login",
        icon:"",
        name:"登陆",
        component:Login,
    }
]

//数组的拼接，导出
//baseRoutes  是数组对象[{},{},{}]
export const baseRoutes = TabBarRoutes.concat(NoTabBarRoutes)

 

 

 

 

 封装的方法解析，

utils>routerEach.js  //代码解析，  函数套函数，子函数执行来自 item 

 

utils>routerEach.js  代码：

import React, { Fragment } from "react";   //jsx语法
import { Route, Redirect, Switch } from "react-router-dom";  //用到路由的
//一个函数，通过入与出   达到渲染的目的
export default (routes) => {  //传入的是一个数组对象，每一个对象都是一个路由的配置项
    //专门用来遍历子路由 //可以说二级路由的...
                                    let routeEach = (item) => {  
                                        return <Route path={item.path}  render={() => {  //item.path 是路径，return返回的是一个jsx
                                            return (
                                                <Fragment>  //  Fragment, 是react的内置组件，不会渲染，因为return返回的是一个jsx 对象
                                                    <Route component={item.component} /> //这样是匹配任意，渲染任意
                                                    <Redirect from={item.path} to={item.children[0].path} />//路由的重定向
                                                    <Switch>  //作用是只匹配一个路由
                                                        {  //子路由的遍历
                                                            item.children.map((child, index) => {//child是每个元素的意思，index，数组下标
                                                                if (child.children) {  //这个的意思是，判断子路由下面还会不会有路由，
                                                                    return routeEach(child)  //把这个子路由返回传入进入，，再次遍历执行渲染
                                                                } else {  //如果没有
                                                                    return <Route path={child.path} key={index} component={child.component} />
                                                                }
                                                            })
                                                        }
                                                    </Switch>
                                                </Fragment>
                                            )
                                        }} />
                                    }

    //这个是通过map 遍历渲染
    return routes.map((item, index) => {   //先执行这块代码？
        if (item.children) {  //当存在为真的时候，就会去执行上面的代码块
            return routeEach(item);
        } else {
            return <Route path={item.path} key={index} component={item.component} />
        }
    })
}


/*

    Fragment
        react的内置组件

        用来当做容器进行使用，特点是不会被渲染到页面上


        这文件的封装思路是，通过传入数组对象（路由配置），然后导出匹配完好的  路由配置

          <Route path="/detail" render={() => {  return <Detail />  }} />




          这个文件是这样去走的：

*/

---

//  tabBar 的创建及使用

 

 tabBar的样式