Muy similar a esta pregunta angular : ¿cómo uso los enlaces de anclaje para la navegación en la página cuando uso el enrutador de reacción?
En otras palabras, ¿cómo implemento el siguiente HTML simple cuando uso el enrutador de reacción?
<a href="#faq-1">Question 1</a> <a href="#faq-2">Question 2</a> <a href="#faq-3">Question 3</a> <h3 id="faq-1">Question 1</h3> <h3 id="faq-2">Question 2</h3> <h3 id="fa1-3">Question 3</h3>Actualmente intercepto clics en dichos enlaces y me desplazo a la posición de anclaje. Esto no es satisfactorio, porque significa que es imposible vincular directamente a alguna sección de una página.
El problema con los enlaces de anclaje es que el valor predeterminado de react-router es usar el hash en la URL para mantener el estado. Afortunadamente, puede cambiar el comportamiento predeterminado por otra cosa, según la documentación de ubicación . En su caso, probablemente quiera probar "URL limpias" usando el objeto HistoryLocation, lo que significa que el enrutador de reacción no usará el hash de URL. Pruébalo así:
Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); });React Router Hash Link funcionó para mí. Fácil de instalar e implementar:
$ npm install --save react-router-hash-linkEn su componente.js, impórtelo como enlace:
import { HashLink as Link } from 'react-router-hash-link'; Y en lugar de usar un ancla <a> , usa <Link> :
<Link to="#faq-1>Question 1</Link> <Link to="#faq-2>Question 2</Link> <Link to="#faq-3>Question 3</Link> NOTA: HashRouter en lugar de Router
import { Link } from 'react-router-dom'
enlace usando
<Link to='/homepage#faq-1'>Question 1</Link>
Luego inserte el siguiente código dentro de su componente React de destino (página de inicio):
useEffect(() => { const hash = props.history.location.hash // Check if there is a hash and if an element with that id exists const el = hash && document.getElementById(hash.substr(1)) if (el) { el.scrollIntoView({behavior: "smooth"}) } }, [props.history.location.hash]) // Fires every time hash changes