web-dev-qa-db-fra.com

Utilisation de balises d'ancrage dans react-router 4

Je souhaite que la page défile jusqu'à mes balises d'ancrage lorsqu'un utilisateur y accède via un lien d'ancrage.

J'utilise react-router 4 et j'ai défini les choses comme suit:

barre de navigation:

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>
...

un itinéraire:

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>
          ...

Je peux voir la balise d'ancrage de hachage dans l'URL et dans mon magasin Redux lorsque je clique sur le lien d'ancrage dans la barre de navigation, et il se dirige effectivement vers le nouvel itinéraire, mais ne fait pas défiler la balise vers le bas.

Est-ce à moi de créer la fonction de défilement ou comment est-il censé fonctionner exactement?

javascriptreactjsreact-router
11
S. Schenk

C'est un problème connu avec le routeur de réaction. ( https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604 )

Il y a aussi une solution. https://www.npmjs.com/package/react-router-hash-link ce paquet résout le problème.

Vous devez utiliser ce Hash Link comme Link comme ci-dessous.

import { HashLink as Link } from 'react-router-hash-link';

13
Akhil P

Pour faire défiler vos balises d'ancrage, vous devez installer React Router Hash Link, avec:

npm install --save react-router-hash-link

puis importez Hash Link:

import { HashLink as Link } from 'react-router-hash-link';

puis utilisez Hash Link, par exemple:

<Link to="/pathLink#yourAnchorTag">Your link text</Link>

et au composant de destination, par exemple:

<div id= "yourAnchorTag">
      <p>Linked to here<p>
</div>
19
Adriano Campos

Si vous ne disposez que de peu de liens d'ancrage prévisibles, la méthode la plus simple pour obtenir le comportement normal consiste à manuellement scrollIntoView() de l'élément si la balise d'ancrage attendue se trouve dans le Window.location.href.

Ici le explication complète .

class Page extends react.Component {
    componentDidMount() {
        if (this.$ref && location.href.includes('#my-ref')) {
            this.$ref.scrollIntoView({
                // optional params
                behaviour: '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>
        );
    }
}

Vérifiez Element.scrollIntoView () et React refs .

3
Filippo Italiano