Не монтируются роуты в React приложении

128

31 января 2020, 10:10

По какой-то причине роут не добавляется в приложение

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

react devTools

Т.е. в пропсах есть данные, но они почему-то не рендерятся. С чем это может быть связано?

В корне приложения есть BrowserRouter, с этим все нормально

Answer 1

Попробуйте следующий код:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
export default ({ admin: { routes = [] } = {} }) => (
    <div className="App main-content">
        {routes.length ? (
            <Switch>
                {routes.map(({ path, component }, i) => (
                    <Route exact key={i} path={path} component={component} />
                ))}
            </Switch>
        ) : null}
    </div>
);

Возможные причины проблемы:

Не импортируете React
<Switch /> рендерится пустой, в случае когда props.admin.routes.length === false
Частая ошибка - когда в пропсу component для <Route /> передают jsx а не саму сущность реакт компонента