Quiero que la página se desplace hacia abajo hasta mis etiquetas de anclaje cuando un usuario navegue hasta ella a través de un enlace de anclaje.
Estoy usando react-router 4 y he definido las cosas de la siguiente manera:
barra de navegación:
export default (props) => { const { updateModal, updateRoute, } = props return( <Navbar fluid collapseOnSelect> <Nav> <NavDropdown eventKey="4" title="Solutions" id="nav-dropdown" noCaret> <MenuItem eventKey="4.1"> <Link to='/solution#ipos'>TESTING ANCHOR</Link> </MenuItem> ...alguna ruta:
export default class extends Component { constructor() { super() this.state = { isLoading: true } } render() { return ( <Grid className='solutions' fluid> <Row className='someClass'> <div> <h2><a href='ipos' id='ipos'>Ipos morna santos paros</a></h2> ...Puedo ver la etiqueta de anclaje hash en la URL y en mi tienda redux cuando hago clic en el enlace de anclaje en la barra de navegación, y de hecho navega a la nueva ruta, pero no se desplaza hacia abajo hasta la etiqueta en sí.
¿Depende de mí crear la función de desplazamiento o cómo se supone que funciona exactamente?
Para desplazarse hacia abajo a sus etiquetas de anclaje, debe instalar React Router Hash Link , con:
npm install --save react-router-hash-linkluego importe Hash Link:
import { HashLink as Link } from 'react-router-hash-link';y luego use Hash Link, por ejemplo:
<Link to="/pathLink#yourAnchorTag">Your link text</Link>y en el componente de destino, por ejemplo:
<div id= "yourAnchorTag"> <p>Linked to here<p> </div>Es un problema conocido con el enrutador de reacción. ( https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604 )
También hay una solución. https://www.npmjs.com/package/react-router-hash-link este paquete resuelve el problema.
Tienes que usar este Hash Link como el Link como se muestra a continuación.
import { HashLink as Link } from 'react-router-hash-link';
Si solo tiene unos pocos enlaces de anclaje predecibles, la forma más sencilla de lograr el comportamiento normal es desplazar manualmente scrollIntoView() del elemento si tiene la etiqueta de anclaje esperada en Window.location.href .
class Page extends react.Component { componentDidMount() { if (this.$ref && location.href.includes('#my-ref')) { this.$ref.scrollIntoView({ // optional params behavior: 'smooth', block: 'start', inline: 'center', }); } } render() { return ( // This is the div you want to scroll to <div ref={ref => { this.$ref = ref; }}> Other content </div> ); } }Compruebe Element.scrollIntoView() y React refs .