How to Highlight Active Link in React Router V6 ?
2 years ago
admin
Reactjs
In today's lesson, we are going to see how to add an active class to the Bootstrap 5 link using React router dom v6.
How to add an active class to the bootstrap 5 link using react router dom v6?
So let's assume that we are working on a crud application using react js and we have a Header component that contains the menu and when the user moves between the links the active link is highlighted.
To do that use the code below:
import React from 'react'
import { Link, useLocation } from 'react-router-dom'
export default function Header() {
//get current active route
const location = useLocation();
return (
<nav className="navbar navbar-expand-lg bg-white rounded shadow-sm">
<div className="container-fluid">
<Link className="navbar-brand" to="/">React CRUD App</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className={`nav-link ${location.pathname === '/' ? 'active' : ''}`} aria-current="page" to="/"><i className="fas fa-home"></i> Home</Link>
</li>
<li className="nav-item">
<Link className={`nav-link ${location.pathname === '/create' ? 'active' : ''}`} aria-current="page" to="/create"><i className="fas fa-pen"></i> Create Task</Link>
</li>
</ul>
</div>
</div>
</nav>
)
}