Ich habe ein Problem beim Navigieren auf eine andere Seite. Die Position bleibt wie auf der vorherigen Seite. Es wird also nicht automatisch nach oben gescrollt. Ich habe auch versucht, window.scrollTo(0, 0)auf onChange Router zu verwenden. Ich habe auch scrollBehavior verwendet, um dieses Problem zu beheben, aber es hat nicht funktioniert. Irgendwelche Vorschläge dazu?

Die Dokumentation zu React Router v4 enthält Codebeispiele für die Bildlaufwiederherstellung. Hier ist ihr erstes Codebeispiel, das als Site-weite Lösung für das Scrollen nach oben dient, wenn eine Seite navigiert wird zu:

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}

export default withRouter(ScrollToTop)

Rendern Sie es dann oben in Ihrer App, aber unterhalb des Routers:

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

// or just render it bare anywhere you want, but just one :)
<ScrollToTop/>

^ direkt aus der Dokumentation kopiert

Natürlich funktioniert dies in den meisten Fällen, aber es gibt mehr Informationen zum Umgang mit Schnittstellen mit Registerkarten und warum keine generische Lösung implementiert wurde.

aber Klassen sind so 2018

ScrollToTop-Implementierung mit React Hooks

ScrollToTop.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

Verwendung:

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

ScrollToTop kann auch als Wrapper-Komponente implementiert werden:

ScrollToTop.js

import React, { useEffect, Fragment } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history, children }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return <Fragment>{children}</Fragment>;
}

export default withRouter(ScrollToTop);

Verwendung:

<Router>
  <ScrollToTop>
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </ScrollToTop>
</Router>

Diese Antwort gilt für Legacy-Code, für Router v4 + überprüfen Sie andere Antworten

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router>

Wenn es nicht funktioniert, sollten Sie den Grund finden. Auch drinnencomponentDidMount

document.body.scrollTop = 0;
// or
window.scrollTo(0,0);

Du könntest benutzen:

componentDidUpdate() {
  window.scrollTo(0,0);
}

Sie könnten ein Flag wie "scrolled = false" hinzufügen und dann im Update:

componentDidUpdate() {
  if(this.scrolled === false){
    window.scrollTo(0,0);
    scrolled = true;
  }
}

Für den React-Router v4 gibt es hier eine App zum Erstellen und Reagieren, mit der die Bildlaufwiederherstellung durchgeführt wird: http://router-scroll-top.surge.sh/ .

Um dies zu erreichen, können Sie die RouteKomponente dekorieren und die Lebenszyklusmethoden nutzen:

import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';

class ScrollToTopRoute extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.path === this.props.location.pathname && this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    const { component: Component, ...rest } = this.props;

    return <Route {...rest} render={props => (<Component {...props} />)} />;
  }
}

export default withRouter(ScrollToTopRoute);

Auf dem können componentDidUpdatewir überprüfen, wann sich der Pfadname des Standorts ändert, und ihn mit dem übereinstimmenpath Requisite abgleichen und, wenn diese zufrieden sind, den Fensterlauf wiederherstellen.

Das Coole an diesem Ansatz ist, dass wir Routen haben können, die den Bildlauf wiederherstellen, und Routen, die den Bildlauf nicht wiederherstellen.

Hier ist ein App.jsBeispiel, wie Sie das oben genannte verwenden können:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Lorem from 'react-lorem-component';
import ScrollToTopRoute from './ScrollToTopRoute';
import './App.css';

const Home = () => (
  <div className="App-page">
    <h2>Home</h2>
    <Lorem count={12} seed={12} />
  </div>
);

const About = () => (
  <div className="App-page">
    <h2>About</h2>
    <Lorem count={30} seed={4} />
  </div>
);

const AnotherPage = () => (
  <div className="App-page">
    <h2>This is just Another Page</h2>
    <Lorem count={12} seed={45} />
  </div>
);

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <div className="App-header">
            <ul className="App-nav">
              <li><Link to="/">Home</Link></li>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/another-page">Another Page</Link></li>
            </ul>
          </div>
          <Route exact path="/" component={Home} />
          <ScrollToTopRoute path="/about" component={About} />
          <ScrollToTopRoute path="/another-page" component={AnotherPage} />
        </div>
      </Router>
    );
  }
}

export default App;

Aus dem obigen Code ist es interessant hervorzuheben, dass nur beim Navigieren zu /aboutoder /another-pagebeim Scrollen nach oben eine Aktion ausgeführt wird. Aber wenn es weitergeht/ fortfahren, wird jedoch keine Bildlaufwiederherstellung durchgeführt.

Die gesamte Codebasis finden Sie hier: https://github.com/rizedr/react-router-scroll-top

Es ist bemerkenswert, dass die onUpdate={() => window.scrollTo(0, 0)} Methode veraltet ist.

Hier ist eine einfache Lösung für React-Router 4+.

const history = createBrowserHistory()

history.listen(_ => {
    window.scrollTo(0, 0)  
})

<Router history={history}>

Wenn Sie React 16.8+ ausführen, ist dies mit einer Komponente einfach zu handhaben, die das Fenster bei jeder Navigation
nach oben scrollt : Hier befindet sich die Komponente scrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Dann rendern Sie es oben in Ihrer App, aber unter Router.
Hier ist in app.js

import ScrollToTop from "./scrollToTop";

function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

oder in index.js

import ScrollToTop from "./scrollToTop";

ReactDOM.render(
    <BrowserRouter>
        <ScrollToTop />
        <App />
    </BrowserRouter>
    document.getElementById("root")
);

Ich hatte das gleiche Problem mit meiner Anwendung. Mithilfe des folgenden Codeausschnitts konnte ich beim Klicken auf die nächste Schaltfläche zum Anfang der Seite scrollen.

<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>
...
</Router>

Das Problem bestand jedoch weiterhin im Browser. Nach vielen Versuchen wurde mir klar, dass dies am Verlaufsobjekt des Browserfensters lag, das eine Eigenschaft scrollRestoration hat, die auf auto gesetzt wurde. Das Setzen auf manuell löste mein Problem.

function scrollToTop() {
    window.scrollTo(0, 0)
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }
}

<Router onUpdate= {scrollToTop} history={browserHistory}>
....
</Router>

In einer Komponente unten <Router>

Fügen Sie einfach einen React Hook hinzu (falls Sie keine React-Klasse verwenden)

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [props.location]);

Ich möchte meine Lösung für diejenigen freigeben, die sie verwenden, react-router-dom v5da keine dieser v4-Lösungen die Arbeit für mich erledigt hat.

Was mein Problem löste, war die Installation von React-Router-Scroll-Top und das Einfügen des Wrappers <App />wie folgt:

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

und das ist es! es funktionierte!

Hooks sind zusammensetzbar und seit React Router v5.1 haben wir einen useHistory()Hook. Basierend auf der Antwort von @ zurfyx habe ich einen wiederverwendbaren Hook für diese Funktionalität erstellt:

// useScrollTop.ts
import { useHistory } from 'react-router-dom';
import { useEffect } from 'react';

/*
 * Registers a history listener on mount which
 * scrolls to the top of the page on route change
 */
export const useScrollTop = () => {
    const history = useHistory();
    useEffect(() => {
        const unlisten = history.listen(() => {
            window.scrollTo(0, 0);
        });
        return unlisten;
    }, [history]);
};

Ein React Hook, den Sie Ihrer Route-Komponente hinzufügen können. Verwenden useLayoutEffectanstelle von benutzerdefinierten Listenern.

import React, { useLayoutEffect } from 'react';
import { Switch, Route, useLocation } from 'react-router-dom';

export default function Routes() {
  const location = useLocation();
  // Scroll to top if path changes
  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
      <Switch>
        <Route exact path="/">

        </Route>
      </Switch>
  );
}

Update : Aktualisiert, um useLayoutEffectanstelle von zu verwenden useEffect, für weniger visuellen Ruck. Dies bedeutet ungefähr:

• useEffect: Komponenten rendern -> auf Bildschirm malen -> nach oben scrollen (Effekt ausführen)
• useLayoutEffect: Komponenten rendern -> nach oben scrollen (Effekt ausführen) -> auf Bildschirm malen

Je nachdem, ob Sie Daten laden (denken Sie an Spinner) oder ob Sie Seitenübergangsanimationen haben, useEffectfunktioniert dies möglicherweise besser für Sie.

Ich habe eine Komponente höherer Ordnung namens geschrieben withScrollToTop. Dieses HOC nimmt zwei Flags auf:

• onComponentWillMount- Ob bei der Navigation nach oben gescrollt werden soll ( componentWillMount)
• onComponentDidUpdate- Gibt an, ob beim Update ( componentDidUpdate) nach oben gescrollt werden soll . Dieses Flag ist in Fällen erforderlich, in denen die Komponente nicht abgemeldet ist, aber ein Navigationsereignis auftritt, z. B. von /users/1bis /users/2.

// @flow
import type { Location } from 'react-router-dom';
import type { ComponentType } from 'react';

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

type Props = {
  location: Location,
};

type Options = {
  onComponentWillMount?: boolean,
  onComponentDidUpdate?: boolean,
};

const defaultOptions: Options = {
  onComponentWillMount: true,
  onComponentDidUpdate: true,
};

function scrollToTop() {
  window.scrollTo(0, 0);
}

const withScrollToTop = (WrappedComponent: ComponentType, options: Options = defaultOptions) => {
  return class withScrollToTopComponent extends Component<Props> {
    props: Props;

    componentWillMount() {
      if (options.onComponentWillMount) {
        scrollToTop();
      }
    }

    componentDidUpdate(prevProps: Props) {
      if (options.onComponentDidUpdate &&
        this.props.location.pathname !== prevProps.location.pathname) {
        scrollToTop();
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default (WrappedComponent: ComponentType, options?: Options) => {
  return withRouter(withScrollToTop(WrappedComponent, options));
};

Um es zu benutzen:

import withScrollToTop from './withScrollToTop';

function MyComponent() { ... }

export default withScrollToTop(MyComponent);

Meine Lösung: Eine Komponente, die ich in meinen Bildschirmkomponenten verwende (wo ich einen Bildlauf nach oben möchte).

import { useLayoutEffect } from 'react';

const ScrollToTop = () => {
    useLayoutEffect(() => {
        window.scrollTo(0, 0);
    }, []);

    return null;
};

export default ScrollToTop;

Dadurch bleibt die Bildlaufposition beim Zurückgehen erhalten. Die Verwendung von useEffect () war für mich fehlerhaft, wenn das Dokument beim Zurückgehen nach oben gescrollt wurde, und hatte auch einen Blinkeffekt, wenn die Route in einem bereits gescrollten Dokument geändert wurde.

Reagiere Haken 2020 :)

import React, { useLayoutEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation();
  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

Hier ist eine andere Methode.

Für den React-Router v4 können Sie einen Listener auch auf folgende Weise an Änderungen im Verlaufsereignis binden:

let firstMount = true;
const App = (props) => {
    if (typeof window != 'undefined') { //incase you have server-side rendering too             
        firstMount && props.history.listen((location, action) => {
            setImmediate(() => window.scrollTo(0, 0)); // ive explained why i used setImmediate below
        });
        firstMount = false;
    }

    return (
        <div>
            <MyHeader/>            
            <Switch>                            
                <Route path='/' exact={true} component={IndexPage} />
                <Route path='/other' component={OtherPage} />
                // ...
             </Switch>                        
            <MyFooter/>
        </div>
    );
}

//mounting app:
render((<BrowserRouter><Route component={App} /></BrowserRouter>), document.getElementById('root'));

Die Bildlaufebene wird ohne setImmediate()auch auf 0 gesetzt, wenn die Route durch Klicken auf einen Link geändert wird. Wenn der Benutzer jedoch die Zurück-Taste im Browser drückt, funktioniert dies nicht, da der Browser die Bildlaufebene manuell auf die vorherige Ebene zurücksetzt, wenn die Zurück-Taste gedrückt wird Wenn Sie also verwenden setImmediate(), wird unsere Funktion ausgeführt, nachdem der Browser die Bildlaufebene zurückgesetzt hat, wodurch wir den gewünschten Effekt erzielen.

Mit React Router Dom v4 können Sie verwenden

Erstellen Sie eine scrollToTopComponent-Komponente wie die folgende

class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
      if (this.props.location !== prevProps.location) {
        window.scrollTo(0, 0)
      }
    }

    render() {
      return this.props.children
    }
}

export default withRouter(ScrollToTop)

oder wenn Sie Registerkarten verwenden, verwenden Sie die folgende

class ScrollToTopOnMount extends Component {
    componentDidMount() {
      window.scrollTo(0, 0)
    }

    render() {
      return null
    }
}

class LongContent extends Component {
    render() {
      <div>
         <ScrollToTopOnMount/>
         <h1>Here is my long content page</h1>
      </div>
    }
}

// somewhere else
<Route path="/long-content" component={LongContent}/>

Ich hoffe, dies hilft für mehr über die Wiederherstellung von Bildlauf. Dort gibt es Dokumente, die auf die Wiederherstellung des Bildlaufs reagieren

Ich habe festgestellt, dass ReactDOM.findDomNode(this).scrollIntoView()das funktioniert. Ich habe es hineingelegt componentDidMount().

Bei kleineren Apps mit 1 bis 4 Routen können Sie versuchen, sie mit der Umleitung zum obersten DOM-Element mit #id und nur einer Route zu hacken. Dann ist es nicht erforderlich, Routen in ScrollToTop zu verpacken oder Lebenszyklusmethoden zu verwenden.

render() {
    window.scrollTo(0, 0)
    ...
}

Kann eine einfache Lösung sein, wenn die Requisiten nicht geändert werden und componentDidUpdate () nicht ausgelöst wird.

Fügen Sie in Ihrem router.jseinfach diese Funktion in das routerObjekt ein. Dies wird den Job machen.

scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    },

So was,

**Routes.js**

import vue from 'blah!'
import Router from 'blah!'

let router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    },
    routes: [
            { url: "Solar System" },
            { url: "Milky Way" },
            { url: "Galaxy" },
    ]
});

Das ist hacky (funktioniert aber): Ich füge nur hinzu

window.scrollTo (0,0);

rendern ();