How to display nested component with react router dom?

Question

In my application, I have several routes defined with react router dom. All the routes works fine but the nested routes are not displaying instead it taking to the error page.

Here is my index routes

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

Here the Dashboardlayout consists of other dashboard related routes

Dashboardlayout page

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;

And my App.js page is, which maps though the initialRoutes file.

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>
    );
  }

The problem is when the url is localhost:3000/dashbaord its displaying the Dashboard component but when the url is localhost:3000/dashboard/create its redirecting me to the Not found/Error page. Why it's happening ?

Estus Flask Estus Flask · Accepted Answer · 2018-11-12T18:59:03

exact prop prevents /dashboard route from being matched at /dashboard/create path.

For parent routes that have nested routes there should be no exact.

How to display nested component with react router dom?

1 Answers