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

score 1 · Answer 1 · answered Mar 19 '23 at 08:31

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.

answered Mar 19 '23 at 08:31

ksd030687d

298
2
12

Its still showing error that path is not defined on `} /> ` Here is the error `Cannot read properties of undefined (reading 'path') TypeError: Cannot read properties of undefined (reading 'path') at ShopPage (http://localhost:3000/static/js/bundle.js:2650:22)` – Shakir Ahmad Mar 19 '23 at 10:34
can you shoe me you main routes component ? – ksd030687d Mar 19 '23 at 14:13
Main Routes are in App.js `

} /> } /> } /> ) : ( ) } />
);` – Shakir Ahmad Mar 19 '23 at 16:08
its hard to read this , can you dump your code in codesandbox and provide the link – ksd030687d Mar 19 '23 at 17:25
I solved problem by downgrading the node package manager – Shakir Ahmad Apr 02 '23 at 05:00

Nested Routing is not displaying the component

1 Answers1