How to Use NavLink in Nested Routes with React Router v6

Learn how to effectively navigate nested routes in React Router v6 using `NavLink` without hardcoding route paths.
---
This video is based on the question https://stackoverflow.com/q/75585602/ asked by the user 'Cezar' ( https://stackoverflow.com/u/6672105/ ) and on the answer https://stackoverflow.com/a/75585634/ provided by the user 'Drew Reese' ( https://stackoverflow.com/u/8690857/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React Router v6 Navlinks in nested Routes

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Navigating Nested Routes in React Router v6 with NavLinks

When building applications in React, managing navigation can become complex, especially when dealing with nested routes. If you're using React Router v6, you may find yourself needing to navigate within routes like game/:id without hardcoding the paths in your NavLink components. This guide provides an easy solution by explaining how to utilize relative paths effectively.

Understanding the Problem

Imagine you have a dashboard setup for a gaming application where users can view different aspects of a game based on its unique ID. Your main structure might look something like this:

[[See Video to Reveal this Text or Code Snippet]]

In your GameRoutes, you have the following navigation links:

[[See Video to Reveal this Text or Code Snippet]]

The challenge here is that you'll want to navigate to paths like game/:id/mercenaries dynamically based on the game's ID without having to type the full path in your to attribute. For example, you might want to click on "Mercenaries" while currently viewing a game with ID 1, resulting in a transition to https://some.page/game/1/mercenaries.

The Solution: Using Relative Paths

The key to resolving this issue lies in the concept of relative links in React Router. By using relative paths, you won't have to explicitly define the complete route each time. Instead, the links will default to the current path where they are rendered.

Implementing Relative Links

Here's how you can implement this solution in your GameRoutes:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

to=".": This relative path indicates you want to stay at the current route (/game/:id).

to="./mercenaries": The dot (./) indicates that you want to go to the mercenaries route from your current location, which results in navigating to /game/:id/mercenaries.

Other links work similarly, adjusting the final part of the path to whichever route you want to navigate to.

Benefits of Using Relative Links

Using relative paths simplifies the navigation logic in your application by:

Reducing Hardcoding: You eliminate the need to constantly update your routes if the base path changes.

Improving Readability: Making route structures clearer and easier to manage.

Enhancing Flexibility: Easily allows you to change the routing architecture down the line without massive refactoring.

Conclusion

Navigating nested routes can be tricky, but using relative paths with NavLink in React Router v6 simplifies the process and enhances the user experience. By following the steps outlined in this post, you can streamline navigation while maintaining the flexibility of your application's structure.

If you're looking for an efficient way to manage navigation in complex applications, give relative paths a try in your NavLink components! Happy coding!

Видео How to Use NavLink in Nested Routes with React Router v6 канала vlogize