Nested Routing in react-router-dom V5 not working

Question

im trying to make a nested routing to my react app using react-router-dom v5 but im stuck!

this is my Shop component code:

import React from "react";
import CollectionsOverview from "../../components/collections-overview/collections-overview.component";
import CollectionPage from "../collection/collection.component";
import {  Link, Route } from "react-router-dom";


const  ShopPage = ({ match }) => {
    console.log(match.path);
    return(
    <div className="shop-page">
        <Link to='/shop/hats'>to Hats</Link>
        <Route exact path={`${match.path}`} component={CollectionsOverview}/>
        <Route path={`${match.path}/hats`} component={CollectionPage}/>
    </div>
);
};




export default ShopPage;

the shop component is being rendered by a Route inside App.js here is the code

<Switch>
      <Route  exact path='/' component={HomePage} />
      <Route  exact path='/shop' component={ShopPage} />
      <Route  exact path='/checkout' component={CheckoutPage} />
      <Route  
        exact path='/signin' 
        render={() => 
          this.props.currentUser  ? (
            <Redirect to='/' />
          ) : (
            <SignInAndSignUpPage/>
          )
        } 
      />
    </Switch>

and im trying to use match.path instead of '/shop/hats' in the path but when i go to /shop/hats in the browser it doesnt render anyting. the weird thing is that the first Route containing CollectionsOverview component is working just fine but the second one isnt. can you guys help me with that ?

Edit : i madea codesandbox project with the same file structure as my original prooject and managed to reproduice the same issue . the codesandbox link

Answer 1

When rendering nested routes you need to allow your root/lower-level Route components to match also any sub-routes/paths they may be rendering. The issue here is that you are exactly matching routes in App, so for example when you navigate to "/shop/hats" from Shop, the "/shop" path no longer exactly matches and Shop is unmounted, thus unmounting any nested routes it may have been rendering.

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route exact path="/shop" component={ShopPage} />
</Switch>

Route paths in RRDv5 work more as "path-prefixes". There is no route allowing for any "/shop/*" path when using the exact` prop.

Within the Switch component path order and specificity matters. If ordered correctly there is almost no need at all to even use the exact prop. Inside Switch you should order the paths in decreasing order of specificity, and remove the exact prop. This works by allowing the Switch to match more specific paths first before falling back to less specific paths.

<Switch>
  <Route path="/shop" component={ShopPage} />
  <Route path="/" component={HomePage} />
</Switch>