Nested Routing is not displaying the component

Question

I'm trying to display CollectionPage Component from ShopPage component as a nested route that receives match as a param but I get an empty page with an error.it is not rendering the collection page from inside the shop page. These are my components

Shop page

import React from 'react';
import { Route } from 'react-router-dom';

import CollectionsOverview from '../../components/collections-overview/collections-overview.component';
import CollectionPage from '../collection/collection.component';

const ShopPage = ({ match }) => (
    <div className='shop-page'>
        <Route exact path={`${match.path}`} element={<CollectionsOverview />} />
        <Route exact path={`${match.path}/:collectionId`} element={<CollectionPage />} />
    </div>
);

export default ShopPage;

CollectionPage Component :

import React from "react";
import CollectionItem from "../../components/collection-item/collection-item.component";
import './collection.styles.scss';

const CollectionPage= ({ match }) => {
    console.log();
    return (
        <div className="category">
            <h2>CATEGORY PAGE</h2>
        </div>
    )
}

export default CollectionPage;

i am trying to render the Collectionpage from inside of shoppage using nested routing but i am getting error while i go to shop shop.component.jsx:9 Uncaught TypeError: Cannot read properties of undefined (reading 'path')

Answer 1

Since you're passing collectionId in Route from ShopPage to CollectionPage component , you have to add match.params.collectionId inside CollectionPage to obtain the Id.

Also i've added collectionId.toUpperCase() so that you can see id in display.

const CollectionPage= ({ match }) => {
    const collectionId = match.params.collectionId;
    return (
        <div className="category">
            <h2>{collectionId.toUpperCase()} PAGE</h2>
        </div>
    )
}

Give this one a try and let me know , if you're able to obtain the collectionId.