Как передать строку в route-router-dom Route как функцию?

Question

Я использую React 16.11.0 и response-router-dom 5.1.2.

У меня есть массив объектов, представляющих страницы, подобные этому:

const pages = [{ url: "/", component: "Home" }, {...}, ... ]

Обновление: возможноЯ должен упомянуть, что это из строки JSON, поэтому я не могу определить тип значений.

Я хочу динамически генерировать маршруты в React, сопоставляя его:

import Home from './components/Home';
...
<BrowserRouter>
    <div className="App">
      <Switch>
        {pages.map(page => (
            <Route path={page.url} component={page.component} />
        ))}
      </Switch>
    </div>
</BrowserRouter>

page.url работает, но URL в любом случае могут быть строками. page.component загружается неправильно, я думаю, потому что это строка, тогда как импортированный Home является компонентом функции React.

Я пытался использовать eval() и Function() для преобразования page.component строка в объекты, но они не работают.

Я пробовал документы и поисковые системы, но не смог найти решение. Возможно я ищу не в тех местах.

Возможно ли это? Как мне это сделать?

Answer 1

На самом деле вы даже можете избежать импорта модулей - require пригодится:

const pages = [{ url: "/", component: "Home" }, {...}, ...]
   .map((obj) => (
      { url: obj.url, component: require(`./components/${obj.component}`).default }
   );

А затем следуйте вашей логике:

<Switch>
   {pages.map(page => (
      <Route path={page.url} component={page.component} />
   ))}
</Switch>

Answer 2

Для решения единственной деталью, которая вам нужна, является динамическое создание компонентов, поэтому

const pages = [
   { url: "/", component: Home },
   { url: "/about", component: About }
 ];

Имейте в виду, что компоненты должны быть определены раньше, такие как Home, About и т. Д.

Answer 3

Попробуйте установить page.component в Home.

Вместо этого:

const pages = [{ url: "/", component: "Home" }, {...}, ... ]

Попробуйте:

const pages = [{ url: "/", component: Home }, {...}, ... ]