Navigate using react-router-dom v6

Today we’ll show you how to navigate in React application using react-router-dom v6. When dealing with the react-router-dom v6, it differs from the routing v5.

Refer to the following article if you are using react-router-dom v5.
Navigate from one page to another page in ReactJS

Ways to navigate using react-router-dom v6

  1. Link
  2. NavLink
  3. Navigate Component
  4. Navigating Programmatically

The Link served as an anchor tag and is used to control the navigation. For a demonstration, see the code below.

The same functionality as Link is provided by NavLink, but it also allows us to show the link as the one the user is now viewing.

3. Navigate Component

You can use the <Navigate /> component to manage the redirection and use the replace attribute to overwrite the current location in the history stack.

4. Navigating Programmatically

If you want programmatically navigation from one page to another then you should use useNavigate. In other words, we can say if you want to manage the redirection on button click then you can use it.

Replace the current location

Use replace attribute to overwrite the location in history stack.

Pass the value to another component

Refer to the following code to pass the value to another component using useNavigate().

Now use the useLocation() to read the state value.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *