Как динамически добавить маршрут к приложению реагировать?

Question

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

component.jsx

import { Route, Switch } from 'react-router-dom';

export default props => (
    <div className="App main-content">
            <Switch>
              {props.admin.routes.length
                ? props.admin.routes.map((route, i) => (
                    <Route
                      exact
                      key={i}
                      path={route.path}
                      component={route.component}
                    />
                  );
                )
                : null}
            </Switch>
    </div>
  );

props.admin.routes

реагирует на devTools

Реквизит содержит данные о маршруте, но если я сошлюсь на account/tickets, у меня пустая страница. Что я могу сделать не так?

приписка

Приложение содержит BrowserRouter в корневом компоненте

Answer 1

Вы можете попытаться использовать render реквизиты для компонента Route:

<Switch>
  {this.props.admin.map((item, index) =>
    <Route
      path={item.path}
      exact
      key={item.id || index} // add new id to the data itself
      render={() => item.component}
    />
  )}
</Switch>

Причина в том, что эта документация component реквизитов может принимать толькореагирующий компонент, а не встроенный JSX.Но вы можете использовать render для динамического создания встроенного JSX.