React router - Nested routes not working

Question

My goal is to have http://mydomain/route1 render React component Component1 and http://mydomain/route2 render Component2. So, I thought it\'s natural to write the routes lik

Answer 1

The problem is that in nested routes, the router will try to mount all the components that match the hierarchy. This is best used when you want to nest components inside each other... but if you want two separate routes to match different components, they will need to be their own routes.

Component2 will mount (inside of App) when the URL is /route1/route2.

If you wanted to nest the components, you would need to add to Component1 so it would render Component2 inside of it.

The reason this works is because nesting components are not the same as nesting URLs and can be handled separately by the router. Sometimes you want the components to nest but not necessarily the URLs, and vice versa.