Динамическое именование компонента из конфигурационного файла в 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'
        },
}

    }

Я надеюсь, что это поможет вам решить вашу проблему