react自动配置路由

文件目录

-home
--api
--page
--route

-blog
--api
--page
--route

-poetry
--api
--page
--route

-photos
--api
--page
--route

-index.js

其中，route/index 做类似如下配置，如

export default [
  /*
   *path: 定义路由的路径
   *component: 需要展示页面路径
   *name: 本个路由的名字
   *lazy: 这个路由是否懒加载
  */
  { path: "/", component: '/home', name: "首页", lazy: true, auth: true }
];

-index.js，配置

import React, {lazy, Suspense} from 'react';
// 这里定义的是每个功能模块的文件夹名
export const ModularList = [
    'home',
    'blog',
    'poetry',
    'photos'
]

let _apiObj = {}
let _routerObj = []

ModularList.map(modularName => {
    // 集成api请求
    try {
        const importInfo = require(`./${modularName}/api/index`)
        const ModularInfo = importInfo.ModularInfo || {}
        const ActionList = importInfo.default || {}
        _apiObj[modularName] = {
            ModularInfo,
            ActionList
        }
    } catch (e) {}

    // 集成路由
    try {
        const importInfo = require(`./${modularName}/route/index`)
        const route = importInfo.default
        route.forEach(el => {
            const component = el.lazy ? lazy(() => import(`../views/${modularName}/page${el.component || el.path}/index`)) : require(`../views/${modularName}/page${el.component || el.path}/index`).default
            _routerObj.push({
                ...el,
                component
            })
        })
    } catch (e) {}
})
export const apiObj = _apiObj
export const routerObj = _routerObj
export const menuObj = _routerObj.filter(el => el.menu)

使用

import {routerObj} from '../views/index'
console.log(routerObj)

 

方法不错，vue也可参考

参考

https://www.jianshu.com/p/f8926ed59d25