1
import React from 'react'
import {CollectionPage} from '../collection/collection.component'
import './page.shop.scss'
import CollectionOverview from '../../components/collection-overview/component.collection-overview'
import { Route } from 'react-router-dom'
const ShopPage = ({ match }) => (
    <div className='shop-page'>

       <Route exact path={`${match.path}`} component={CollectionPage} />

    </div>
  );
export default ShopPage

this works ^ 

      <Route exact path={`${match.path}`} component={CollectionOverview} />

this works as well 


       <Route exact path={`${match.path}`} component={CollectionOverview} />
       <Route path={`${match.path}/:collectionId`} component={CollectionPage} />

this works but when i go to the ${match.path}/:collectionId it doesn't show anything , can someone point me to issue with <Route path={'${match.path}/:collectionId'}component={CollectionPage} /> cuz it just won't show anything.

Sapnesh Naik
  • 11,011
  • 7
  • 63
  • 98
Ankush Verma
  • 689
  • 1
  • 8
  • 17
  • Put `exact` on that last route too. –  Mar 17 '20 at 18:15
  • Tried it , still not working. @reg – Ankush Verma Mar 17 '20 at 18:18
  • Make sure you do pass an id and that `CollectionPage` actually renders something. –  Mar 17 '20 at 18:19
  • I actually even made it static as `shop/jackets`, it still isn't showing the component. And yes, Collection page works perfectly fine if I leave it on the `{${match.path}}` URL . It works perfectly on `/shop` but not on `shop/jackets` @reg – Ankush Verma Mar 17 '20 at 18:23
  • Did you correctly follow the [react-router-dom](https://reacttraining.com/react-router/web/guides/quick-start) tutorial and wrapped your routes into a `BrowserRouter` or `HashRouter` ? –  Mar 17 '20 at 18:27
  • Yes, I can go to `Localhost:3000/shop` but cannot go to `Localhost:3000/shop/hats` – Ankush Verma Mar 17 '20 at 18:29
  • What is `collectionId` ? you're saying that `/hats` equal `/:collectionId`? why not just put `${match.path}/hats` since `hats` is clearly not an id here. –  Mar 17 '20 at 18:35
  • Well, I tried the 'placeholder data' .If it had worked for `/shop/hats` then I could have worked for `{ ${match.path}/:collectionId}` but since it isn't I cannot tell where the error is. Also, `/:collectionId` provides a dynamic way to get what has been entered in the URL .I don't think `/:colletionId` has anything to do with why the route isn't working. – Ankush Verma Mar 17 '20 at 18:43
  • Try out a different thing. Like replacing `component={CollectionPage}` to `render={() => 'test'}` to see if the issue is elsewhere. –  Mar 17 '20 at 19:10
  • It isn't working , probably issue with my `` .`` has been set up , i don't get where the issue is.I can't seem to get even a workaround. @reg – Ankush Verma Mar 17 '20 at 19:40
  • Integrate `HashRouter` instead and get back to me. –  Mar 17 '20 at 19:42
  • Won't it break my app .I have multiple components that use the history.push etc. which i believe are provided by the ``? – Ankush Verma Mar 17 '20 at 19:45
  • `history.push` also works with `HashRouter`. I sure would know, it works in my current project. If you have any questions, check [this](https://stackoverflow.com/questions/51974369/hashrouter-vs-browserrouter) out. –  Mar 17 '20 at 19:49

2 Answers2

0

Have you passed the collectionId to your url ?

  1. if you did not pass the collectionId that means it will go on first route
  2. if you pass collectionId that time it will check if url match or not it will not check strongly.
  3. if you want to strongly pass collectionId then add the exact keyword to second route.
Dhruv Ghadiali
  • 1
  • I actually even made it static as `shop/jackets` , it still isn't showing the `component `.Tried adding `exact` as well – Ankush Verma Mar 17 '20 at 18:20
  • have you used tage in your project main index.js ? because i have tried to generate this issue but in my project it works fine so, check you project index file. – Dhruv Ghadiali Mar 18 '20 at 01:59
  • I had,since `localhost:3000/shop` was working . rewrote the project and now it works somehow. – Ankush Verma Mar 18 '20 at 09:49
0

This is answered in the Q&A. Please check your routes for the exact path when rendering for the first time. For ShopPage in App.js please remove exact path. And keep the exact path in ShopPage.

  1. In App.js remove exact <Route path="/shop" component={ShopPage} />

  2. In Shop Page component keep. 

const ShopPage = ({ match }) => (`
  <div className="shop-page">`
   <Route exact path={`${match.path}`} component={CollectionOverview} />`
    <Route path={`${match.path}/:collectionId`} component={FinalCollectionPageComp} />
  </div>
`);

Hope it helps.

VRoxa
  • 973
  • 6
  • 25
Abdul Adil
  • 1
  • 1