Nested Routes with react-router-config

[Asher978]

Hello,

I am hoping that someone is able to share a solution around rendering nested routes.

I have a need to do nested routes:

e.g:

const routes = [
  {
    component: App,
    routes: [
      { path: '/', exact: true, component: Home },
      { path: '/login', component: Login },
      {
        path: '/dashboard',
        name: 'Dashboard',
        component: isAuthenticated(Dashboard),
        icon: 'icon-components',
        collapse: false,
        sideBar: true,
        routes: [
          {
            pathname: '/dashboard/dummy',
            component: Dummy,
          }
        ]
      }
    ]
  }
];

In the Dashboard component:

render () {
    const {route} = this.props;
    return (
        <React.Fragment>
            <h2>Dashboard</h2>
            <NavLink to="/dashborad/dummy">Dummy</NavLink>
            <div>{renderRoutes(route.routes)}</div>
        </React.Fragment>
    )
}

And above does not seem to work. When i route to /dashboard dummy is always rendered even if the route is not /dashboard/dummy

Any suggestions?

[Asher978]

figured it out.