Mit Anker-tags in reagieren-router 4

Ich die Seite nach unten scrollen, um meine Anker-tags navigiert ein Benutzer, der über einen Anker-link.

Ich bin mit reagieren-router-4 und ich habe Dinge definiert wie folgt:

navbar:

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

einige route:

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

Ich sehen kann, die hash-Anker-Tags in der url und in meinem redux-store, wenn ich auf den Anker-link in der navebar, und in der Tat navigiert zu der neuen route, aber es muss nicht nach unten scrollen, um den tag selbst.

Ist es bis zu mir schaffen die scroll-Funktion oder wie soll es genau funktionieren?

InformationsquelleAutor S. Schenk | 2018-01-12

  1. 7

    Es ist ein bekanntes Problem mit router reagieren. (https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604)

    Gibt es eine Lösung. https://www.npmjs.com/package/react-router-hash-link dieses Paket behebt das Problem.

    Verwenden Sie diese Hash Link als Link wie unten.

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

    InformationsquelleAutor Akhil P

  2. 9

    Nach unten Rollen, um Ihre Anker-tags, die Sie installieren müssen, Reagieren die Router-Hash-Link, mit:

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

    dann import Hash-Link:

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

    dann verwenden Sie Hash-Link, zum Beispiel:

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

    und an der Ziel-Komponente, zum Beispiel:

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

    InformationsquelleAutor Adriano Campos

  3. 2

    Wenn Sie nur wenige vorhersehbare Anker-links, der einfachste Weg, um zu erreichen das normale Verhalten ist, um manuell scrollIntoView() von der element, wenn Sie die erwartete Anker-tag in der Window.location.href.

    Hier die vollständige Erklärung.

    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>
        );
    }
}

    Überprüfen Element.scrollIntoView() und Reagieren refs.

    InformationsquelleAutor Filippo Italiano

Schreibe einen Kommentar