Active Link with React-Router

Title: Active Link with React-Router: How to Start with an Active Link in React-Router v4

React-Router is a popular routing library for React applications, allowing developers to handle navigation and URL routing with ease. One common requirement is to have an active link, indicating the current page or section of the application. In this blog post, we will explore how to start off with an active link using React-Router version 4.

Using NavLink in React-Router v4

In previous versions of React-Router, we could use the activeClassName or activeStyle properties with the Link component to customize the active link. However, these properties are no longer available in React-Router v4. Instead, we can use the NavLink component, which provides enhanced features for conditional styling.

To start off with an active link, we need to replace the Link component with NavLink in our code. Here’s an example:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

In the code above, we have replaced the Link components with NavLink and added the activeClassName property to the HomeNavLink. By using the exact prop with the HomeNavLink, it will only be active when the current URL path matches exactly the path specified in the to prop. This ensures that the HomeNavLink remains active only when the home page is loaded.

React-Router v6 Approach

For those using React-Router v6, the approach is slightly different. In v6, the NavLink component has been replaced with the Link component, and active link styling can be achieved using className and the isActive property.

Here’s an example of using a custom NavLink component in React-Router v6:

import { NavLink, useMatch, useResolvedPath } from 'react-router-dom';

const CustomNavLink = ({ to, title }) => {
   let resolved = useResolvedPath(to);
   let match = useMatch({ path: resolved.pathname, end: true });

   return (
      <NavLink to={to} className={`d-flex align-items-center py-2 px-4 ${match ? 'cta-btn' : 'c-n-b-link'}`} >
        <span className='ms-1 f-w-600'>{title}</span>
      </NavLink>
)
}

In the above code, we define a CustomNavLink component using the NavLink component from the react-router-dom package. We utilize the useMatch and useResolvedPath hooks to determine if the current path matches the given to path. Based on the match, we apply the appropriate className for the active link styling.

Conclusion

Starting off with an active link in React-Router v4 or v6 can be achieved by using the appropriate components and properties. In React-Router v4, we can use the NavLink component and the activeClassName property. In React-Router v6, we need to utilize the Link component and implement our custom NavLink component to achieve active link styling.

By following the steps outlined in this blog post, you can ensure that your active links are correctly styled from the start, enhancing the user experience of your React applications.

reference : 

reactjs