DEV Community

Cover image for Hooks Introduced in React-Router v5.1

Hooks Introduced in React-Router v5.1

Nero Adaware on September 27, 2019

I am always excited when there is a new release of any of my favourite libraries/frameworks/languages, At about 6 pm yesterday while scrolling thro...
Collapse
 
ezzbee profile image
Ezzbee

Hi Nero,

I'm just learning reactJS and I'm having a problem with app I'm working on.

It is supposed to be an online store. I've a product object use to store data about the various products for sale.

The challenge I'm having is how to pass this object in my route statement to the component that will display this object as a kind of catalog.

Currently, I've the following line in my router block:

where {Product} is the component.

I'll really appreciate your help. Thanks.

Collapse
 
ageofcode profile image
ageofcode

There is a bug at the example for useParams in V5.0
the 4th line:
let id = match.params;
It should be :
let {id} = match.params;

Collapse
 
finallynero profile image
Nero Adaware

thanks for pointing that out

Collapse
 
keziahmoselle profile image
Keziah

Thank you for this post !
I will try these soon :D

Collapse
 
justusburger profile image
Justus Burger

Nice post!

In your second code block you imported useHistory but then used useParam.

Collapse
 
finallynero profile image
Nero Adaware

Fixed that.
Thanks Justus

Collapse
 
bllyanos profile image
Billy Editiano Saputra

Hi nero, I was wondering how to make a protected route using react-router hooks ?? thanks

Collapse
 
najdi123 profile image
Ali Najdi

Bro, you are a life saver!! thanks a lot!! I didnt kno y location wasnt working for me until I found your post, hooks have got me forgetting how to walk the walk

Collapse
 
holtmansfield profile image
Holt Mansfield

Very nice! I've been waiting for this

Collapse
 
starinsun profile image
starinsun

Nice to see, but I do not understand the last hook, can you introduce me more?

Collapse
 
finallynero profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Nero Adaware

Maybe a different usecase of useRouteMatch might help you understand. Checkout this short tutorial link

Collapse
 
developerruhul profile image
Developer Ruhul

This incredible stuffs.