Introduction to navigation

Navigation enables the user to quickly go through different pages and resources across the website. Traditionally, an anchor tag (<a>) is used to implement navigation to another page or link.

Concept of navigation in React

React is used to create single-page applications where page refresh shouldn’t be involved. This design is chosen because a page refresh clears the client state. If we use the anchor tag for navigation, clicking on the link triggers a page refresh. For this reason, we can’t use it in a React SPA to navigate between components. The react-router provides navigation interfaces that render a specific component by changing the current location.

There are two ways we can implement navigation through react-router:

1. By creating an element

The react-router provides the <Link /> and <NavLink /> components for navigation. These element show links that the users can click to navigate to specific URLs. This topic will be covered later in this lesson.

This type of navigation is used when we want the user to decide whether they want to click on a particular link or not. All the links that we use for this type of navigation should be visible to the user. They should also be styled in such a way that the user can easily differentiate them from the rest of the content.

2. By navigating programmatically

The react-router provides the <Navigate /> and useNavigate hooks, which users can navigate programmatically through event handlers. This method can also be used to navigate to a different component in response to some changes in the application. This method will be covered in the following lessons.

This type of navigation is more suitable when we want the user to go to a particular page or website without having to click on a link. In this type of navigation, we’re navigating the user based on their actions. For example, when a user enters their username and password on the login page and clicks on the login button, the app should perform authentication and navigate the user to either the home or profile page. If the user isn’t authenticated and tries to access unauthorized pages or links, such as /profile, then the app should navigate the user to the login page. Programmatic navigation handles these cases.

Link element

A <Link /> element lets the user change the current location of the URL and navigate to another page. It renders an accessible <a> tag and prevents its default page refresh behavior. Here’s an example of the syntax for a <Link /> element:

<Link to="/contacts">Go to Contacts</Link>

In the above syntax, to is a prop that accepts an absolute address (the location to which we want to navigate). The to prop can accept a string or an object. There are more props for this component that’ll be covered later.

When the user clicks on this link, it changes the current location to /contacts. If the current URL is http://localhost:3000 when the user clicks on the link, it changes the URL to http://localhost:3000/contacts. If there’s any path in the Route that matches this URL or link, then it renders the corresponding component.

Note: The difference between href (in the anchor tag) and to (a prop of link element) is that href accepts either a relative or an absolute address, whereas the to prop of the Link element only accepts an absolute address.

NavLink element

The NavLink element uses style or customization to show whether a link is active.

Note: A link becomes active when a user clicks on it. For example, if we click on the Contacts link and land on the respective page, the Contacts link is considered active.

The NavLink element has more features than the Link element. It also has all the props that a Link element has and adds additional props, such as the following:

isActive: When a function is called inside styleA prop that’s used to add inline styles for a React component or classNameA prop that’s used to pass class names for styling purpose props, the function receives the isActive prop from the NavLink component as an argument. The isActive prop is a boolean. If the link is active, then isActive is true and vice versa.

end: This prop ensures that the current component isn’t marked as active when its descendent paths are matched.

Get hands-on with 1200+ tech skills courses.