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, we use the anchor (<a>) tag to create links to other pages. A side effect of the anchor tag is that it causes the page to reload. This 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, both of which can be imported from the react-router-dom package.

import { createBrowserRouter, createRoutesFromElement, 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>

Both of the above links will generate anchor (<a>) tags with the text “About”, which take the user to the /about view when clicked. However, the default behavior of an anchor tag – refreshing when the page loads – will be disabled. Note that if we preface the path provided to our to prop with a forward slash, /, as we did in the example above, this path will be treated as an absolute path. That is, React Router will assume this path is navigating from the root directory. We’ll talk more about how to define paths that are relative to our current directory in upcoming exercises.

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 users to quickly see which content they are viewing. We can also pass a function to className or style to further customize the styling of an active (or inactive) NavLink, like so:

<NavLink 
  to="about" 
  className={ ({ isActive }) => isActive? 'activeNavLink' : 'inactiveNavLink'}
  > About </NavLink>

In the example above we pass a function to the className prop which applies the activeNavLink class if the NavLink is active and inactiveNavLink otherwise.

As we’ve seen in this exercise, NavLink and Link are great tools to use to help our users navigate our website. Let’s practice using Link and NavLink in our application so that our users can have an easier time navigating around.

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='pathToPage'>
  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 the link you clicked 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.

Or sign up using:

Already have an account?