DEV Community

Discussion on: React Router: A simple tutorial on nested routes.

Collapse
 
dorjitshering profile image
Dorji Tshering

From what I understand, if you apply exact: true to the component containing nested routes, you will get a blank view which means the route to the nested routes doesn't exist. That seems to be because when you put the exact prop on the parent component as true, and as you navigate to /parent/nested route, react tries to look for that route in the top level definition of route config array which it doesn't hence the blank view or Not Found page if you have one. Upon removing the exact prop or setting it to false, first it passes the /parent path, then reaches its nested path and sees /parent/nested path to which your specified component gets rendered. And one more thing is of course setting exact to true also passes /parent test but it stops going inward for nested routes due to it as well.

Collapse
 
nickrobinson profile image
nrstudio

Thank you for the reply! I removed the exact prop from my Home component route, and as such, the Home component is still not being rendered.

nickrobinsonportfolio.netlify.app -- My projects page contains the subroutes. With the exact prop, the error happens on the Projects page at:


{routes.map((route, i) => (
path={route.path}
render={ props => (

)}
/>
))}