Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

441
Visualizações
Por 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?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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 : cuando true , la clase/estilo activo solo se aplicará si la ubicación coincide exactamente .
  • strict : cuando true , 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>

Edite por qué-reaccionar-router-navlink-prop-exact-v5-vs-end-v6-lead-to- different-result-w

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda