0

'When i visit "/shop/hats" it shows only blank page. No error i could see. But when i put category component in 1st route, it works.'

'shop component'

import React from "react";

import CollectionPreview from "../../component/CollectionPreview/collectionPreview-com"
import {Route} from "react-router-dom"
import Category from "../../component/Category/category-com"


const Shop = ({match}) =>  {
    console.log("Printing" + match.path);
    
    return(
        <div>
           <Route exact path="/shop" component={CollectionPreview} /> 
           <Route path="/shop/:categoryId" component={Category} />
        </div>
            
        )
    }

export default Shop;

'Category component which is not rendering. but when i use this component in 1st route, it works '

import React from "react";
import "./category-style.css";

const Category = ({match}) => {
    console.log(match);
    
    return(
        <div className="Test">
            <h1>Test</h1>
        </div>
    )
}

export default Category;

'I even tried mentioning 2nd route as normal route (Without Param-route). No luck'

Dilip A
  • 37
  • 1
  • 8
  • I hope you wrapped your `Shop` component with `BrowserRouter`. Just posted a solution, try that. – Darsh Shah Jul 03 '20 at 16:58
  • https://stackoverflow.com/questions/49162311/react-difference-between-route-exact-path-and-route-path – Tony Jul 03 '20 at 17:09

2 Answers2

0

Try this:

import { Switch, Route } from 'react-router-dom';

//your code

return (
   <Switch>
       <Route exact path="/shop" component={CollectionPreview} /> 
       <Route path="/shop/:categoryId" component={Category} />
   </Switch>
);

For more details about when to use Switch, refer this: here

Darsh Shah
  • 351
  • 3
  • 9
  • Thanks for this. But still it doesnt work. It shows empty blank white page. Even console log is not printing up in Category component if tried accessing "http://localhost:3000/shop/hats" - this local address. – Dilip A Jul 03 '20 at 17:15
  • Then there must be an issue with the `Category` component. It would be great if you share your project's CodePen. – Darsh Shah Jul 03 '20 at 17:18
  • Do my Github link helps? https://github.com/DilipAnthony/ecom-website.git – Dilip A Jul 03 '20 at 17:27
  • This must solve the Routing issue. But you need to debug your Components for rendering required outputs. – Darsh Shah Jul 03 '20 at 17:33
  • Thing is, When i use Category component in 1st Route, it works perfectly. I got Struck. – Dilip A Jul 03 '20 at 17:36
  • Ohh, I haven't gone through your logic yet. But that's something you need to debug. Check this, it might help: [here](https://stackoverflow.com/questions/58494905/react-router-id-as-parameter) – Darsh Shah Jul 03 '20 at 18:15
0

you can try with useParams() hooks. like below

import React from "react";
import { useParams } from 'react-router-dom';
import "./category-style.css";

const Category = () => {
const {categoryId} = useParams();
    return(
        <div className="Test">
            <h1>Test</h1>
        </div>
    )
}
export default Category;
Mohiuddin
  • 80
  • 5