react router dom NavLink component isActive feature is not working?

Question

Problem: isActive (add active class to link) is not working.

My NavLink component is not working. I posted this problem several times in stack overflow no one solved my problem instead of solving they are tagging another question which doesn't solve my problem.

This is the home component:

import React from 'react';
// import Nav from './navbar';
import { NavLink } from "react-router-dom";
import "../App.css";

export default function home() {
  return (
    <div>
      <NavLink
                to="/"
                style={isActive => ({
                    color: isActive ? "green" : "blue"
                })}
            >
                home
            </NavLink>
            <NavLink
                to="/about"
                style={isActive => ({
                    color: isActive ? "green" : "blue"
                })}
            >
                about
            </NavLink>
        <h1>Home page Here</h1>
    </div>
  )
}

This is the "About" component:

import React from 'react';
// import Nav from './navbar';
import { NavLink } from 'react-router-dom';
import "../App.css";

export default function about() {
  return (
    <>
    <NavLink
                to="/"
                style={isActive => ({
                    color: isActive ? "green" : "blue",
                    backgroundColor: isActive ? "red" : "white"
                })}
            >
                home
            </NavLink>
            <NavLink
                to="/about"
                style={isActive => ({
                    color: isActive ? "green" : "blue",
                    backgroundColor: isActive ? "red" : "white"

                })}
            >
                about
            </NavLink>

        <h1>About page here</h1>
    </>
  )
}

I tried so many times and so many ways but the result is always same shown in above picture. I want isActive feature to work fine and should add active class when I click on about or anything else in navbar

"I posted this problem several times in stack overflow no one solved my problem instead of solving they are tagging another question which doesn't solve my problem." Then clearly you are not describing your issue well enough. Saying you've "tried stuff" and "nothing works" isn't helpful to anyone. Your comment below regarding the home `"/"` always being highlighted is an important detail. — Drew Reese, Oct 30 '22 at 15:06

score 0 · Answer 1 · answered Oct 29 '22 at 12:03

0

That callback receives object not boolean i.e { 'isActive': boolean }.

so it should be

style={(data) => ({
    color: data.isActive ? "green" : "blue",
//...
})}

same as

style={({isActive}) => ({
    color: isActive ? "green" : "blue",
//..
})}

answered Oct 29 '22 at 12:03

bogdanoff

1,705
1
10
20

no bro if i click on about link then both links are in green – KARTX LEGEND YT Oct 29 '22 at 12:10
@KARTXLEGENDYT can you update question with updated code. – bogdanoff Oct 29 '22 at 12:51

Arifur Rahaman · Answer 2 · 2022-10-29T15:17:07.840

isActive is an object so you have to destructure it like {isActive}. You have to use the end prop, it will ensure the component isn't matched as "active" when its descendant paths are matched.

       <NavLink
        to="/"
        end
        style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
      >
        Home
      </NavLink>
      <NavLink
        to="about"
        style={({ isActive }) => ({ color: isActive ? "green" : "blue" })}
      >
        About
      </NavLink>

Here is the working codesandbox link : https://codesandbox.io/s/quiet-morning-yk78xv?file=/src/App.js

react router dom NavLink component isActive feature is not working?

2 Answers2