CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Rahul
Rahul

Reputation: 402

Nested route not rendering

will try to be brief.

Dashboard component is rendering, but while hitting localhost:3000/dashboard/shipments nothing is rendering.
Not versed in the react, not sure if render={({ location })(Line 1) is causing problem.
Tried placing components/simply h4 tag in Route (Line2) but nothing working.

Necessary imports are done.

App.js

const pages = [
  {
    pageLink: '/dashboard',
    view: Dashboard,
    displayName: 'Dashboard',
    showInNavbar: true,
    exact: false
  },....more routes.
return(
<Router>
  <Route render={({ location }) => (//---------->Line 1
    <React.Fragment>
      <Navbar />
      <Switch location={location}>
        {pages.map((page, index) => {
          return (
            <Route
              exact={page.exact}
              path={page.pageLink}
              component={page.view}
              key={index}
            />
          )
        })}
        <Redirect to='/' />
      </Switch>
    </React.Fragment>
  )}
  />
</Router>
)

dashboard.js

export default function Dashboard() {
    const authedUser = useSelector(state => state.authedUser);
    let { path } = useRouteMatch();
    if (!authedUser.loggedIn) return <Redirect to='/login' />
    return (
        <React.Fragment>
            <section id='dashboard-component'>
                <Sidebar />
                <Switch>
                    <Route exact path={path}>
                        <h2>Dashboard</h2>
                    </Route>
                    <Route exact path={`/${path}/shipments`}><h4>sdsd</h4></Route>//------>Line 2
                </Switch>
            </section>
        </React.Fragment>
    )
}

Upvotes: 2

Views: 261

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

You have a extra / at the start of your nested Route

<Route exact path={`/${path}/shipments`}><h4>sdsd</h4></Route>

Now path already return /dashboard. Writing path={`/${path}/shipments`} would make the route path as path={'//dashboard/shipments'}

You need to specify your child route like

<Route exact path={`${path}/shipments`}><h4>sdsd</h4></Route>

Working demo

Upvotes: 2

Related Questions