react-router 动态菜单

Question

根据后台返回的数据结构渲染路由。

1.事先引入所有的路由组件

import { view as TaxRateConfig } from "./../dashboard/SystemConfig/TaxRateConfig";
...

2.根据后台返回的数据格式渲染

      if (item.Children) {
        item.Children.map(route => {
          routes.push(
            <Route
              path={`/${parentPath}/${route.Path}`}
              render={props => <route.Component {...props} />} //这里一个都渲染不出来
             // render={props => <div>{route.Component}</div>}    //这里验证可行
            />
          );
        });

3.后台返回的数据格式

问题大概找到了 就是

render={props => <route.Component {...props} />} //这里一个都渲染不出来

这里的route.Component 对应的是后台的Component字段 但是根本没有引用 import 对应的 组件。该怎么处理呢？

Answer 1

你应该在这个函数外面把所有的组件都引入进来，组成一个对象，类似：

import TaxRateConfig from xxxx

let map = {
    TaxRateConfig
}

render={props => <map[route.Component] {...props} />} //这里一个都渲染不出来

Answer 2

按需引用,全部用按需引用拉进来。然后在你要map的时候会去引入

import React from 'react';
import { asyncComponent } from 'react-async-component';

export default function wrapAsyncComponent(resolve) {
  return asyncComponent({
    resolve: resolve,
    LoadingComponent: () => <div>Loading</div>,
    ErrorComponent: ({ error }) => <div>{error.message}</div>
  });
}

const Buttons = asyncComponent(() => import('./button'));