0
84
VistasReact.js: navegue a una etiqueta html dentro de un componente
quiero pasar de un componente a otro y deslizarme directamente a una etiqueta html dentro de él.
usando React.js enrutador v6
<Route path="/mypage/#c" element = {<MyPage/>} />
(#c es una identificación de la etiqueta html en /mypage)
pero el código que he proporcionado no funciona.
simplemente va a la página y no se desliza en la etiqueta.
1 Respuestas
Responde la pregunta0
El hash debe agregarse al enlace o simplemente leerse desde la URL, es decir, el objeto de location , en lugar de especificarse en la propiedad de path del componente Route . Agregarlo a la path romperá la coincidencia de ruta de ruta.
<Route path="/mypage" element={<MyPage />} />
react-router-dom@6 no maneja la vinculación directa a etiquetas hash en el documento, y en este momento, la mejor biblioteca disponible para hacer esto en versiones anteriores de RRD, react-router-hash-link aún no se ha actualizado para admitir RRDv6.
El componente MyPage podría usar un useEffect con una dependencia en location.hash , consultar el DOM e intentar desplazar ese elemento a la vue.
Ejemplo:
import { useLocation } from "react-router-dom";
const MyPage = () => {
const { hash } = useLocation();
useEffect(() => {
const el = document.querySelector(hash);
if (el) {
el.scrollIntoView({ behavior: "auto" });
}
}, [hash]);
return (
<>
... content ...
<div id="c">This is the content I'm interested in</div>
... more content ...
</>
);
};
