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