React中来自配置文件的动态命名组件

Question

看到了很多答案，由于某种原因，根本无法理解，或者在这种情况下不起作用。我目前已经构建了路由器，以基于要导入的配置文件动态构建路由。我遇到的问题是，我还希望路由渲染的组件来自配置文件，但无法使其正常工作。

export const configNavOptions = {
config:[
{
  group: "general",
  paths: [
    {name:"name 1", component:"Component 1"},
    {name:"name 2", component:"Component 2"},
    {name:"name 3", component:"Component 3"},
  ]
}
]
}

AND THEN WITHIN MY ROUTER I AM MAPPING THE CONFIG FILE AS SO

  <Switch>
      {configNavOptions.config.map(config => (
          config.paths.map(path => (
            <Route exact path={`${this.props.match.url}/${config.group}/${path.name}`}
            component={path.component}/>
          ))
        ))}
        </Switch>

如果我将{path.component}替换为实际的组件，它会完美运行，但我无法完成最后一步。

谢谢一堆！！

Answer 1

我解决了这个问题，我有这个：

 <Root>
    <PopNotification />
        <Suspense fallback={<Loader siteLoader />}>
          <Switch>
            {
              allRoutes()[this.props.userKind].map(singleRoute => {
                return <Route {...singleRoute} />;
              })
            }
          </Switch>
        </Suspense>
      </Root>

其中this.props.userkind是用户的种类，allRoutes函数如下所示：

    export function allRoutes(){


    return {

[userRoles.bufet_owner]: [
        ...publicRoutesArray,
        ...commonPrivateRoutes,
        {
            exact: true,
            path: '/plan',
            key: "PlanBody",
            component: <PlanBody />,
        },
        {
            exact: true,
            path: '/success-plan',
            key: "PlanSuccess",
            component:<PlanSuccess />,
        },
        {
            exact: true,
            path: [
                '/accounts/entry',
                '/accounts/egress',
                '/accounts/entry/:page',
                '/accounts/egress/:page',
            ],
            component: AccountsContainer,
            key: 'AccountsContainer'
        },
}

    }

我希望这可以帮助您解决问题