Nested route not rendering

Question

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

Shubham Khatri · Accepted Answer · 2020-05-15 19:54:14Z

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

Collectives™ on Stack Overflow

Nested route not rendering

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related