I need to highlight the active NavLink in react-router v6. It states in the docs (https://v5.reactrouter.com/web/api/NavLink) that we need to stop using className and instead go with an inline style function, but I cannot figure it out properly. Here is the code sandbox: https://codesandbox.io/s/router-v6-highlight-active-link-c50bo?file=/src/Home.jsx
Basically the code below shows how the docs tell us to do it, but it seems not to work for me.
<NavLink
to='search'
className='navlinkbuttons'
style={isActive => ({
color: isActive ? "green" : "blue"
})}
>
Search
</NavLink>
All help is appreciated. Thanks!
NavLink activeClassName prop does not exists anymore in V6. You have to do it manually like followings :
<NavLink
className={(navData) => (navData.isActive ? 'active' : '')}
to="/child"
>
menu 1
</NavLink>
Working example : https://stackblitz.com/edit/react-pdudcd?file=src/Navigation.js