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

Question

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.

have you checked this? https://ultimatecourses.com/blog/active-navlink-inline-styles-with-react-router — Gabriel Pellegrino, May 04 '22 at 16:41
AFAIK `connected-react-router` hasn't been updated yet to be compatible with `react-router-dom@6`. — Drew Reese, May 04 '22 at 16:43
@GabrielPellegrino the example is exactly doing what I'm doing (just using inline styles instead of CSS classes, otherwise the same logic) — Can Poyrazoğlu, May 04 '22 at 16:47
@DrewReese I've switched to `redux-first-history` (as many commented out at the issues), yet _still_ have the same problem. — Can Poyrazoğlu, May 08 '22 at 02:14
Think you could create a *running* codesandbox demo of your code attempt that we could inspect and debug live? — Drew Reese, May 10 '22 at 06:43
@Drew Reese makes a good point. It's best to have a live version of your code with the same behavior as in your project that we can debug. — Chris Claude, May 14 '22 at 15:59

score 0 · Answer 1 · answered May 08 '22 at 08:16

0

Maybe you want something like this example CodeSandbox

answered May 08 '22 at 08:16

Hakob Sargsyan

1,294
1
9
15

are you implying to put links directly under `BrowserRouter` or not using styles and relying on browser's default link styles? don't know how I can pull the first one without heavy refactoring, and second one isn't possible as I don't want the default styles. otherwise, my code is the same as the in the sandbox if I'm not missing something. – Can Poyrazoğlu May 08 '22 at 09:54
I suggest put your NavLink groups to the BrowserRouter, after that if it is possible use styles, if it will be huge refactoring , then don't pass props to the className function , passing object to the className function , in the ES6 template literals can be undefined , if props will be undefined also , check this example [code](https://codesandbox.io/s/pedantic-mestorf-dzfmh0?file=/src/App.js) – Hakob Sargsyan May 08 '22 at 10:26
I have a check your example again , and use same in my example with className and object property , inside of BrowserRouter , objects is okay for you. @CanPoyrazoğlu , but anyway try to check is styles['link'] it come true or not , or sometimes is true sometimes is undefined, I am not sure – Hakob Sargsyan May 08 '22 at 10:34
Debug it `${styles['link']} ${props.isActive ? styles['selected'] : ''}` and check is everyting consoled fine as you want , use my example , try to console – Hakob Sargsyan May 08 '22 at 10:37
I don't think there is a problem with my styles, when I refresh the page it works just fine. It also works fine on Chrome and Firefox. The problem is with Safari and only when I use a NavLink that uses history API instead of a full page load, so that's very likely about it. – Can Poyrazoğlu May 08 '22 at 18:33

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

1 Answers1