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’shref
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 theto
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
.