Hi guys !.
In this post we will learn how to use the useNavigate hook in React JS. useNavigate is part of React Router and has replaced useHistory...
For further actions, you may consider blocking this person and/or reporting abuse
Hey,
so according to react router documentation, useNavigate() returns a method that allows us to navigate from one link to another. We don't store it inside the navigate variable. It is a hook. It is not a regular function. When we assign useNavigate() to navigate, the hook gets called and the method gets returned, which is stored inside it.
Very Useful.
Thanks for bearing with a newbie comment! I used to be able to just do this.props.history.push(
/Welcome) in my class component to go to a new route from the click handler in a class component. Now I need to create an entire functional component just to use that "extremely useful and easy to use" function? Any tips on how to handle that in a class component are greatly appreciated.Hi
Ok so the problem is that you can not use this prop in class components because the children components must use react hooks to access the route context which is only possible with functional components.
Check this out: stackoverflow.com/questions/647829...
Thank you for taking a look, Saleh!
no problem :).
if you have any questions, you can always reach out to me on twitter
cheers :)
Thanks for the article,
Is it okay to use a button instead of an anchor tag when you're redirecting to another page? won't it cause accessibility issues?
Hi, I have a problem, watching a video on youtube that used history.push ('/ login? redirect = shipping'), how can I modify it using navigate, because if I use the string "navigate ('/ login? redirect = shipping') even if logged in it returns to home page and does not go to the shipping page.
Sorry did you figure it out im having same issue
Please note that you can NOT use a hook in class-based components, as is stated here. Functional components only.
Yes you are right, i forgot to mention that
Can I use useNavigate to send props to the page I am redirecting to?
Yes, you can pass props
What if you want to pass data to the next page? for example select a record from a grid then open edit page passing the selected data
Yes, you can pass data
navigate("/todos", { state: { newId: id } })
How do we get this state on the receiving end?
How do we pass state with useNavigation and receive it on the other end?
Want to delete '/login' and navigate to '/profile' after login has successful. How can I delete current '/login' using useNavigate() ?