'react-router-dom NavLink doesn't reflect isActive change without refreshing the page

I'm trying to use the NavLink's isActive prop to check whether the link's route is the current route to apply some visual styling.

Whenever I navigate to a page it works correctly as expected. However, if I tap a link while I'm inside a page, the changes aren't reflected to the components. The page and the address (which I presume is using history.pushState, which might be the culprit) updates instantly (without an actual HTTP page reload) but the old page still has the isActive property and the new one doesn't.

If I refresh the page which performs an actual "hard" reload, then the change is reflected.

Here is the relevant parts of the code (with actual paths anonymized) (styles is my imported module CSS with the relevant styles):

function NavigationBar(props:NavigationBarProps){
    return <div className={styles['container']}>
        <NavLink to={'/first'} className={props => `${styles['link']} ${props.isActive ? styles['selected'] : ''}`}>
            first
        </NavLink>
        <NavLink to={'/second'} className={props => `${styles['link']} ${props.isActive ? styles['selected'] : ''}`}>
            second
        </NavLink>
        <NavLink to={'/third'} className={props => `${styles['link']} ${props.isActive ? styles['selected'] : ''}`}>
            third
        </NavLink>
    </div>
}

What am I doing wrong and how can I get it to work correctly (without implementing path changes manually and without disabling using history API, of course)?

I am on React 18.0.1, React-DOM 18.1.0, React-Router 6.3.0, React-Router-DOM 6.3.0 and connected-react-router 6.9.2.

UPDATE: I've also tried ditching connected-react-router (as it's suggested that it doesn't fully support react-router 6.x and seems like a dead library) and moving completely to https://github.com/salvoravida/redux-first-history yet still have the exact same problem.

UPDATE 2: This problem seems to be happening on Safari. It works correctly on Chrome and Firefox.

Solution 1:^[1]

Maybe you want something like this example CodeSandbox

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Hakob Sargsyan

'react-router-dom NavLink doesn't reflect isActive change without refreshing the page

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]