Welcome back! Our journey today brings us into the heart of React, with a focus on NavLink Components. These components guide users around websites — think of them as the navigation system on a spaceship! Another crucial part of this ship is the Link — a less advanced sibling of NavLink. As we delve deeper, we will learn how to enhance these with appealing styles and helpful attributes. But before we get started, ensure that React Router DOM v6 is ready in your project, as its unique features will be our guide today.
In React routing, NavLink is one way to navigate different routes, acting like an advanced Link. Here's how:
Think of NavLinks as doors on our spaceship that lead us to different areas like Home or About. Each click transports us to the respective spaces within the site.
NavLink's superpower is that it offers user feedback—it styles "active" links. An 'active' link is akin to the room we're in. So, if we're in the 'About' room, the 'About' gets styled as 'active':
