1

Hi I have a main page called FeaturedProduct.js which lists all the products fetch from the API https://fakestoreapi.com.

I trying to set up react router dom version (6) whereby user click on any of the product will open up that single product through Product.js but the error - No routes matched location "/products/6".

This is my code: https://codesandbox.io/s/magical-smoke-r7yik9?file=/src/App.js

The FeaturedProduct.js work ok

// I try to key in the url manually into the browser i.e. localhost:8888/products/1 but it is blank too

jack601
  • 11
  • 4
  • The first issue is that your route is configured as `/product/:id` (without the s) – Nick Jan 12 '23 at 04:36
  • Your second issue is going to be that, inside of `` you're using `match` as a prop but I _don't think_ that's how it works. I believe you're want to use the `useParams` hook... something like `const { id } = useParams()` – Nick Jan 12 '23 at 04:37

1 Answers1

0

You need to use the useParams() hook to de-structure your id variable from the url. The useParams() hook is provided by the react-router package by default. You can read more about it - Here

Meanwhile, I've also edited your code and implemented the useParams() hook. You can check it out in this CodeSandbox

If you've got any other questions, feel free to ask :)

Kshipra Jadav
  • 89
  • 5
  • 1
    thanks! But how do you console.log to see all the properties of the product that we click? because when I clicked on the product view - it doesn't reflect 1 product – jack601 Jan 12 '23 at 05:09
  • Fix the routes in your sandbox so the detail page matches and renders. – Drew Reese Jan 12 '23 at 05:23
  • It's simple. You're using the wrong URL to query the products. Navigate to the [docs](https://fakestoreapi.com/docs) and you'll see that in order to get one product, you need to pass the id like this :- `https://www.fakestoreapi.com/products/id` Right now, you're doing it like this :- `https://fakestoreapi.com/products/?id=${id}` Just remove the `?id=` part and you'll be good to go. – Kshipra Jadav Jan 12 '23 at 05:24
  • 1
    but ${id} is not an array so it will have issue with the map function right – jack601 Jan 12 '23 at 05:39
  • yes, i know. I think you will be able to figure that our by yourself. If not then hit me up. I will help you along with it. – Kshipra Jadav Jan 13 '23 at 07:00