En mi aplicación React, trato de navegar a una sección de mi primera página cuando presiono un botón en mi barra de navegación. Estoy logrando esto con una función onClick en mi botón:
const onNavClick = (e, id) => { let element = document.getElementById(id); e.preventDefault(); element.scrollIntoView(); };...
<Button onClick={(e) => onNavClick(e, "products")} ... > Shop </Button> También estoy especificando una id en el elemento al que quiero navegar.
Todo funciona como se esperaba en la página principal ya que ese elemento ya está en el DOM. El problema es que no puedo acceder cuando voy a otra página y presiono el botón Nav para llegar a esa parte. Estoy recibiendo este error:
Cannot read properties of null (reading 'scrollIntoView')
¿Hay alguna forma de acceder a ese elemento desde otras páginas y navegar a esa sección en mi primera página?
No puede desplazarse a un elemento que no existe en la página. Ver los documentos .
El método scrollIntoView() de la interfaz Element desplaza el contenedor principal del elemento de manera que el elemento en el que se llama scrollIntoView() sea visible para el usuario.
Si desea navegar entre las páginas, hay varias opciones.
Puede usar un componente de enlace de MUI:
<Link href='#'>Link to somewhere</Link> Si está usando Next.js , puede usar su enrutador incorporado:
import { useRouter } from 'next/router' const router = useRouter() router.push('/homepage') Otro enrutador de uso común es react-router :
import { useNavigate } from "react-router-dom" let navigate = useNavigate() navigate('/homepage')Si desea navegar a la página y luego desplazarse al elemento, puede pasar algún tipo de datos para indicarlo y luego manejarlo en la página de destino.
Ejemplo usando Next.js :
Pasar datos como una consulta:
import { useRouter } from 'next/router' const router = useRouter() // Pass some kind of reference to the element you want to scroll to router.push({ pathname: '/homepage', query: { scrollTo: element } }) En /pages/homepage , verifique la consulta y manéjela apropiadamente:
import { useRouter } from 'next/router' const router = useRouter() let element if (router.query?.scrollTo) { element = router.query.scrollTo // Now scroll to the element }