Root Navlink always get active class React Router Dom

You have to use isActive={} to add additional verification to ensure whether the link is active.

document

Working jsFiddle. (fiddle is not created by me)

Code you need to add is like below

Example in jsfiddle

<li><NavLink to="https://stackoverflow.com/" isActive={checkActive}>Home</NavLink></li>

Change in your code

<li> <NavLink to="https://stackoverflow.com/" activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

check the isActive prop and “checkActive” is a function.

const checkActive = (match, location) => {
    //some additional logic to verify you are in the home URI
    if(!location) return false;
    const {pathname} = location;
    console.log(pathname);
    return pathname === "https://stackoverflow.com/";
}

Another config you can use is “exact” but It is not possible to demonstrate it in a jsFiddle.
I think the code would be like

<li> <NavLink exact to="https://stackoverflow.com/" activeClassName="active-link">Home</NavLink> </li>

Hope this helps. And let me know if you need more info.