Learn

In the last exercise, you used the URL bar to navigate to a path that matched one of your application’s routes. But how do you navigate from within the app itself?

When building a website using HTML, the anchor (<a>) tag can be used to create links to other pages, however, this causes the page to reload which can distract our users from the immersive experience of our smooth React application!

React Router offers two solutions for this: the Link and NavLink components which can be imported from react-router-dom on their own or alongside the other components we’ve already imported.

import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom';

Both Link and NavLink components work much like anchor tags:

  • They have a to prop that indicates the location to redirect the user to (similar to the anchor tag’s href attribute)
  • They wrap some HTML to use as the display for the link
<Link to="/about">About</Link>
<NavLink to="/about">About</NavLink>

The two links above will generate anchor (<a>) tags with the text “About” and which take the user to the /about page when clicked. However, the default behavior of an anchor tag – refreshing when the page loads – will be disabled!

So, what’s the difference between a Link and a NavLink? When the URL path matches a NavLink component’s to prop, the link will automatically have an 'active' class applied to it. This can be quite useful for building navigation menus, as we can define CSS styles for the .active class name to differentiate between active and inactive links, enabling a user to quickly see which content they are viewing.

NavLink components also accept an optional activeClassName prop which can specify an additional class or set of classes that will be applied when the URL path matches their to prop.

Note: Though the simplest way to specify the to location is as a string, React Router also allows you to provide this location as a function or object. These approaches aren’t covered in this lesson but you may find it interesting to read about them if you need to programmatically generate the to location.

Instructions

Task 1

Head over to Articles.js located in the src/components/. This component renders a list of <a> links for each value in the filteredArticles array. If you try clicking on these links in the running application, you’ll notice a very subtle page reload (pay attention to the “refresh” button in your browser)!

Import the Link component into this file and then replace the <a> tags to eliminate the page reload!

Note: The articles themselves won’t appear yet. We’ll fix that soon!

Hint

Take a look at the Categories.js file to see how this is done. Your code should look something like this:

<Link to='/path/to/page'>
  Link Text
</Link>

Task 2

In the running application, try clicking on the links rendered by the Header, such as “Articles”. Again, you may notice a page refresh.

Open up the Header.js file and you’ll see that these links are rendered using plain old <a> tags!

First, import the NavLink component into the Header.js file. Then, inside the return statement of the Header component, replace each instance of the <a> tag with a NavLink component.

Make sure to replace the href attribute with the to prop!

Hint

You will have to import the NavLink component from react-router-dom.

To render a NavLink, include a to prop like so:

<NavLink to="/path">Click Me</NavLink>

Task 3

To verify your work, try clicking on the navigation links. You should notice that the page no longer refreshes! Furthermore, you’ll notice that link that you click on will be bolded!

Hint

Recall that the .active class is automatically added when the URL matches the to prop of a NavLink. If you open up the public/index.css file, you’ll see that we’ve defined a style for the selector .header a.active.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?