Necesito resaltar el NavLink activo en react-router v6. Dice en los documentos ( https://v5.reactrouter.com/web/api/NavLink ) que debemos dejar de usar className y, en su lugar, usar una función de estilo en línea, pero no puedo resolverlo correctamente. Aquí está el código sandbox: https://codesandbox.io/s/router-v6-highlight-active-link-c50bo?file=/src/Home.jsx
Básicamente, el siguiente código muestra cómo los documentos nos dicen que lo hagamos, pero parece que no funciona para mí.
<NavLink to='search' className='navlinkbuttons' style={isActive => ({ color: isActive ? "green" : "blue" })} > Search </NavLink>Toda ayuda es apreciada. ¡Gracias!
La propiedad NavLink activeClassName ya no existe en V6. Tienes que hacerlo manualmente como sigue:
<NavLink className={(navData) => (navData.isActive ? 'active' : '')} to="/child" > menu 1 </NavLink>Ejemplo de trabajo: https://stackblitz.com/edit/react-pdudcd?file=src/Navigation.js