这里写自定义如果用react-router-config 进行集中式配置路由呢，就像vue中配置路由一样，使用lazy该怎么办

在路由文件夹的index文件中将router文件解析到BrowserRouter中 代码片.

import * as React from 'react';
import {
      BrowserRouter } from 'react-router-dom';
import router from './router';

export interface IAppProps {
     
}

export default class App extends React.Component<IAppProps, any> {
     
  public render() {
     
    return (
      <BrowserRouter>
        {
     router}
      </BrowserRouter>
    );
  }
}

下边的router文件应该是按照我们配置文件一样去写

import {
      Exception, LayoutOuter, LayoutSpin } from 'src/components';
import {
      Skeleton } from 'antd';
import Store from 'entities/user';
import React from 'react';
import {
      renderRoutes, RouteConfig } from 'react-router-config';
import Layout from './layout/content';
import {
     LayoutLogin} from './layout/login'
import External from './views/external';
import Login from './views/login';
import {
      observer } from 'mobx-react';//是的我这里用的是MOBX
import GlobalConfig from 'global.config';
/**
 *  react-router-config 配置文档  https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
 *  react-router 配置文档 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md
 *  path 配置文档 https://github.com/pillarjs/path-to-regexp/tree/v1.7.0
 */
const MainRoute = [
    {
     
        // 外部页面 百度这种
        path: "/external/:url",
        exact: true,
        component: External
    },
    {
     
        path: "/table",
        exact: true,
        component: React.lazy(() => import("pages/table-poc"))
    },
    {
     
        path: "/listPage",
        exact: true,
        component: React.lazy(() => import("pages/listPage"))
    },
    {
     
        path: "/form",
        exact: true,
        component: React.lazy(() => import("pages/form"))
    },
    {
     
        path: "/echarts",
        exact: true,
        component: React.lazy(() => import("pages/echarts"))
    },
    {
     
        path: "/pricing/:id",
        exact: true,
        component: React.lazy(() => import("pages/table"))
    },
    {
     
        path: "/test/:id",
        exact: true,
        component: React.lazy(() => import("pages/table"))
    },
]
const router: RouteConfig[] = [
    {
     
        path: "/outer",
        component: AuthentRouter(LayoutOuter),
        routes: [
            // 转换 默认 路由为 无菜单 头部对外 路由
            ...MainRoute.map(x => {
     
                return {
     
                    ...x,
                    path: x.path ? `/outer${
       x.path}` : undefined
                };
            }),
        
            {
     
                component: Exception
            }
        ],
    },
    {
     
        path: "/listPage",
        component: AuthentRouter(GlobalConfig.isIframe ? LayoutOuter : Layout),
        routes: [
            // 转换 默认 路由为 无菜单 头部对外 路由
            ...MainRoute.map(x => {
     
                return {
     
                    ...x,
                    path: x.path ? `${
       x.path}` : undefined
                };
            }),      
            {
     
                component: Exception
            }
        ],
    },
    {
     
        path: "/",
        component: AuthentRouter(Layout),
        routes: [
            {
     
                path: "/",
                exact: true,
                component: React.lazy(() => import("pages/listPage"))
            },
            ...MainRoute,
            {
     
                component: Exception
            }
        ]
    }
]
/**
 * 路由认证 
 * @param Component 
 */
function AuthentRouter(Component: React.ComponentClass) {
     
    return (props) => (
        <AuthentComponent {
     ...props}>
            <Component {
     ...props} />
        </AuthentComponent>
    )
}
function Suspense(Component: React.LazyExoticComponent<any>) {
     
    return (props) => (
        <React.Suspense fallback={
     <LayoutSpin />}>
            <Component {
     ...props} />
        </React.Suspense>
    )
}
//每个路由组件外层的身份认证组件
@observer
class AuthentComponent extends React.Component<any> {
     
    constructor(props) {
     
        super(props);
        this.onLogin()
    }
    async onLogin() {
     
        await Store.Login(this.props.location.search);
        this.props.history.replace(this.props.location.pathname)
        // window.location.search = "";
    }
    componentDidMount() {
     
    }
    render() {
     
        if (Store.loding) {
     
            return <LayoutSpin />
        }
        // 用户登陆菜单加载完成进入主界面
        if (Store.isLogin) {
     
            return this.props.children
        }
        return <LayoutLogin>
            <Login {
     ...this.props} />
        </LayoutLogin>
    }
}
export default renderRoutes(router) 

希望可以帮助到大家!这里使用的是 Typescript,mobx,react,rxjs技术栈开发的!