le routeur de réaction fait défiler vers le haut sur chaque transition

Cette réponse est pour le code de legs, pour le routeur v4+ chèque d'autres réponses

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

Si cela ne fonctionne pas, vous devez trouver la raison. Aussi à l'intérieur de componentDidMount

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

vous pouvez utiliser:

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

vous pouvez ajouter quelques drapeaux comme "défile = false" et ensuite dans la mise à jour:

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

Pour réagir-routeur v4ici, est de créer de réaction-app qui permet le défilement de la restauration: http://router-scroll-top.surge.sh/.

Pour ce faire, vous pouvez créer, décorer le Route composant et l'effet de levier du cycle de vie des méthodes:

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

Sur le componentDidUpdate nous pouvons vérifier si l'emplacement du chemin d'accès changements et le faire correspondre à la path prop et, si ceux-ci satisfait, restaurer la fenêtre de défilement.

Ce qui est cool à propos de cette approche, est que nous pouvons avoir itinéraires de restauration de défilement et les routes qui ne sont pas de restauration de défilement.

Voici un App.js exemple de la façon dont vous pouvez utiliser le haut:

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;

Du code ci-dessus, ce qui est intéressant à souligner est que de seulement lors de la navigation à /about ou /another-page la faire défiler vers le haut d'action sera exécuté. Cependant, quand on va sur / pas de scroll de restauration qui va arriver.

L'ensemble de la base de code peut être trouvé ici: https://github.com/rizedr/react-router-scroll-top

J'ai écrit un Ordre Supérieur Composant appelé withScrollToTop. Cette HOC prend dans les deux drapeaux:

• onComponentWillMount - Que ce soit pour faire défiler vers le haut lors de la navigation (componentWillMount)
• onComponentDidUpdate - Que ce soit pour faire défiler vers le haut lors de la mise à jour (componentDidUpdate). Ce drapeau est nécessaire, dans le cas où le composant est pas démonté, mais une de navigation de l'événement se produit, par exemple, à partir de /users/1 à /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));
};

Pour l'utiliser:

import withScrollToTop from './withScrollToTop';
function MyComponent() { ... }
export default withScrollToTop(MyComponent);

J'ai trouvé que ReactDOM.findDomNode(this).scrollIntoView() est de travail. Je l'ai placé à l'intérieur de componentDidMount().