Welcome back! Our journey today brings us into the heart of React, with a focus on NavLink Components. These components guide users around websites — think of them as the navigation system on a spaceship! Another crucial part of this ship is the Link — a less advanced sibling of NavLink. As we delve deeper, we will learn how to enhance these with appealing styles and helpful attributes. But before we get started, ensure that React Router DOM v6 is ready in your project, as its unique features will be our guide today.
In React routing, NavLink is one way to navigate different routes, acting like an advanced Link. Here's how:
JavaScript1import { BrowserRouter as Router, NavLink } from 'react-router-dom'; 2 3const Nav = () => ( 4 <Router> 5 <NavLink to="/home" activeClassName="active">Home</NavLink> 6 <NavLink to="/about" activeClassName="active">About</NavLink> 7 </Router> 8);
Think of NavLinks as doors on our spaceship that lead us to different areas like Home or About. Each click transports us to the respective spaces within the site.
NavLink's superpower is that it offers user feedback—it styles "active" links. An 'active' link is akin to the room we're in. So, if we're in the 'About' room, the 'About' NavLink gets styled as 'active':
JavaScript1import { BrowserRouter as Router, Link, NavLink } from 'react-router-dom'; 2 3function Nav() { 4 return ( 5 <Router> 6 <Link to="/home">Home</Link> 7 <NavLink to="/about" activeClassName="active">About</NavLink> 8 </Router> 9 ); 10}
The attribute activeClassName="active" in NavLink indicates this. Upon visiting '/about', NavLink applies the class 'active' to our About link. Delightful, isn't it?
Ships ought to look cool, right? NavLinks are no different: we style them using CSS:
JavaScript1import { BrowserRouter as Router, NavLink } from 'react-router-dom'; 2import './App.css'; 3 4function Nav() { 5 return ( 6 <Router> 7 <NavLink to="/home" className="nav-link" activeClassName="active">Home</NavLink> 8 <NavLink to="/about" className="nav-link" activeClassName="active">About</NavLink> 9 </Router> 10 ); 11}
In our CSS file, we deck out the .nav-link and .active tags with unique styles.
We can even use the style attribute to apply styles dynamically based on the state of the NavLink. This is like changing the color of a room in the spaceship based on whether it is being used or not.
Let's look at an example:
JavaScript1<NavLink 2 to="/dashboard" 3 style={({ isActive }) => ({ 4 color: isActive ? 'orange' : 'blue' 5 })} 6> 7 Dashboard 8</NavLink>
In this example, we're using a function to determine the style. This function receives an object as a parameter with isActive property, a boolean that returns true if this NavLink is currently active. We then use a ternary operator to set the color based on whether the NavLink is active. If isActive is true, the color will be orange; otherwise, it will be blue. This allows for greater interactivity and visual feedback for users!
NavLink attributes are like a spaceship's navigation instructions that tell the spaceship which planet to go to and which path to take. Here are some important NavLink attributes:
to: This attribute is equivalent to determining the destination of the spaceship. It indicates which route to take when the NavLink is clicked. For instance, <NavLink to='/mars'>Go to Mars</NavLink> would take us to the 'mars' route when clicked.
replace: This attribute decides whether the spaceship should replace the current location in the history stack with a new location. If replace is set to true, the current URL in the history stack is replaced with a new URL instead of adding the new URL to the history stack.
exact: This attribute is used to avoid any ambiguity in NavLink activation. It ensures that the NavLink is only considered 'active' if the location is an exact match. The exact prop helps us make sure we're only highlighting the NavLink to the exact location we're currently at instead of also highlighting the links to similar, but not the same, locations.
Let's look at an example to illustrate how these attributes work:
JavaScript1<NavLink to='/home' replace exact>Home</NavLink>
In this case, the Home NavLink directs the spaceship to the '/home' route, the replace attribute replaces the current URL in the history stack instead of adding a new one, and it will only get the activeClassName or activeStyle if the current URL is exactly '/home'. These attributes help in providing a better navigation experience.
Time for some practice! Let's equip our spaceship with NavLink:
JavaScript1import { BrowserRouter as Router, NavLink } from 'react-router-dom'; 2 3function Spaceship() { 4 return ( 5 <Router> 6 <NavLink to="/cockpit" replace exact activeClassName="active">Cockpit</NavLink> 7 <NavLink to="/engine-room" replace exact activeClassName="active">Engine Room</NavLink> 8 </Router> 9 ); 10}
Our spaceship now has two rooms. We've applied the exact attribute to each so that they obtain the activeClassName only when their respective URLs match exactly.
Great work! You now understand NavLink components in React Router, how they compare to Link, how to style them, and how to use NavLink attributes. Practice is up next—it solidifies learning and develops precision. So, gear up!