Как отобразить вложенный компонент с реагирующим маршрутизатором DOM?

Question

В моем приложении у меня есть несколько маршрутов, определенных с реакцией маршрутизатора dom. Все маршруты работают нормально, но вложенные маршруты не отображаются, а переходят на страницу ошибки.

Вот мой индекс маршрутов

const initialRoutes = [
{
 path: "/",
 component: Home
},
{
 path: "/login",
 component: Login
},
{
 path: "/dashboard",
 component: Dashboardlayout
},
{
 path: "*",
 component: Error
} /* And so on. */
];
export default initialRoutes;

Здесь Dashboardlayout состоит из других маршрутов, связанных с приборной панелью

Страница панели инструментов

import Dashboard from "../pages/DashboardPages/Dashboard";
import Create from "../pages/DashboardPages/Create";

var dashRoutes = [
  {
    path: "/",
    name: "Dashboard",
    icon: "nc-icon nc-bank",
    component: Dashboard
  },
  {
    path: "/dashboard/create",
    name: "Dashboard",
    icon: "nc-icon nc-bank",
    component: Create
  }
];
export default dashRoutes;

И моя страница App.js, которая отображается через файл initialRoutes.

render() {
    const routeComponents = RootRoutes.map(({ path, component }, key) => (
      <Route exact path={path} component={component} key={key} />
    ));
    return (
      <div className="main-body">
        <BrowserRouter>
          <Switch>{routeComponents}</Switch>
        </BrowserRouter>
        {this.state.menuModal ? (
          <MenuToggle toggleMenuModal={() => this.toggleMenuModal()} />
        ) : (
          ""
        )}
      </div>
    );
  }

Проблема заключается в том, что URL-адрес localhost: 3000 / dashbaord отображает компонент Dashboard, а когда URL-адрес localhost: 3000 / dashboard /, создает его, перенаправляя меня на страницу Не найдено / Ошибка. Почему это происходит?

Answer 1

exact prop предотвращает совпадение маршрута /dashboard по пути /dashboard/create.

Для родительских маршрутов с вложенными маршрутами не должно быть exact.