0
437
VistasPor qué React Router NavLink prop exact (v5) vs. end (v6) conduce a un resultado diferente con una barra inclinada en la URL
En React Router Versión 5 tenía un NavLink que tenía el siguiente aspecto:
<NavLink to="/notes" exact={true} className="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" activeClassName="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" > Home </NavLink> Reconoció tanto localhost:3000/notes como localhost:3000/notes/ con una barra inclinada al final como direcciones URL activas.
En React Router Versión 6 lo refactoricé a lo siguiente:
<NavLink to="/notes" end className={(navData) => navData.isActive ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" : "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" } > Home </NavLink> Esto reconoce solo localhost:3000/notes como URL activa.
¿Hay alguna manera en v6 de tener también la versión con barra diagonal reconocida como una URL activa?
1 Respuestas
Responde la pregunta0
Creo que ha confundido lo que representa el accesorio exact react-router-dom v5, o más bien, que ha combinado el comportamiento entre los accesorios exact y strict .
v5
-
exact: cuandotrue, la clase/estilo activo solo se aplicará si la ubicación coincide exactamente . -
strict: cuandotrue, la barra inclinada final en el nombre de ruta de una ubicación se tendrá en cuenta al determinar si la ubicación coincide con la URL actual. Consulte la documentación de<Route strict>para obtener más información.
Tenga en cuenta que el énfasis con respecto a la coincidencia exacta es mío.
v6
En la versión 6 react-router-dom , todas las rutas/enlaces siempre coinciden exactamente. El accesorio end de NavLink tiene más que ver con la barra inclinada final "/" que con la coincidencia de rutas.
Si se usa el complemento
end, se asegurará de que este componente no coincida como "activo" cuando coincidan sus rutas descendientes. Por ejemplo, para representar un enlace que solo está activo en la raíz del sitio web y no en ninguna otra URL, puede usar:<NavLink to="/" end> Home </NavLink>
Para abordar su pregunta
Por qué React Router NavLink prop exact (v5) vs. end (v6) conduce a un resultado diferente con una barra inclinada en la URL
Esto se debe a que estás comparando manzanas con naranjas. Si desea lograr el mismo comportamiento de enlace de v5 a v6 con respecto a la barra inclinada final "/" , omita la propiedad end .
<NavLink to="/notes" className={(navData) => navData.isActive ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" : "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium" } > Home </NavLink> 