Estoy usando navhashlinks en mi aplicación junto con el enrutador react, pero el problema que encuentro es que, dado que estoy proporcionando un '#elemento' al navhashlink, no se corresponde con la ruta de la ruta, ...

1
Joshua Bitton 15 mar. 2021 a las 04:14

1 respuesta

La mejor respuesta

Problema

Parece que a pesar de que la ruta raíz es la misma, los enlaces de navegación buscan una igualdad más profunda entre las dos rutas y, por lo tanto, son coincidencias únicas. Parece que el NavHashLink con el enlace hash ha llenado la propiedad hash en el objeto location.

Solución

Puede utilizar la función de apoyo isActive para proporcionar su propia lógica de coincidencia de ruta entre enlaces esa ruta a la misma página.

<NavHashLink
  to="/library#divlibrary"
  smooth
  activeStyle={{ color: "red" }}
  isActive={(match, location) => {
    return match?.url === location?.pathname
  }}
>
  To library{" "}
</NavHashLink>
<NavHashLink
  to="/library"
  activeStyle={{ color: "red" }}
  isActive={(match, location) => {
    return match?.url === location?.pathname
  }}
  >
  To Library
</NavHashLink>

Demo

Edit react-routes-and-navhashlink-issue

enter image description here

1
Drew Reese 15 mar. 2021 a las 02:37