Tenho um problema ao navegar para outra página, sua posição permanecerá como a página anterior. Portanto, não vai rolar para cima automaticamente. Eu também tentei usar window.scrollTo(0, 0)no roteador onChange. Também usei scrollBehavior para corrigir esse problema, mas não funcionou. Alguma sugestão sobre isso?

A documentação do React Router v4 contém exemplos de código para restauração de rolagem. Aqui está o primeiro exemplo de código, que serve como uma solução em todo o site para "rolar para o topo" quando uma página é navegada para:

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)

Em seguida, renderize-o na parte superior do seu aplicativo, mas abaixo do Roteador:

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

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

^ copiado diretamente da documentação

Obviamente, isso funciona para a maioria dos casos, mas há mais informações sobre como lidar com interfaces com guias e por que uma solução genérica não foi implementada.

mas as aulas são tão 2018

Implementação de ScrollToTop com 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);

Uso:

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

ScrollToTop também pode ser implementado como um componente wrapper:

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

Uso:

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

Esta resposta é para código legado, para roteador v4 + verifique outras respostas

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

Se não estiver funcionando, você deve descobrir o motivo. Também dentrocomponentDidMount

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

você poderia usar:

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

você pode adicionar algum sinalizador como "scrolled = false" e depois atualizar:

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

Para o react-router v4 , aqui está um app create-react que consegue a restauração do scroll: http://router-scroll-top.surge.sh/ .

Para conseguir isso, você pode criar, decorar o Routecomponente e aproveitar métodos de ciclo de vida:

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

Em componentDidUpdate, podemos verificar quando o caminho de localização muda e combiná-lo com o pathprop e, se estiver satisfeito, restaurar a rolagem da janela.

O que é legal nessa abordagem, é que podemos ter rotas que restauram a rolagem e rotas que não restauram a rolagem.

Aqui está um App.jsexemplo de como você pode usar o acima:

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;

Do código acima, o que é interessante apontar é que somente ao navegar /aboutou /another-pagerolar para cima a ação será executada. No entanto, ao continuar/ nenhuma restauração de rolagem acontecerá.

A base de código inteira pode ser encontrada aqui: https://github.com/rizedr/react-router-scroll-top

É notável que o onUpdate={() => window.scrollTo(0, 0)}método está desatualizado.

Aqui está uma solução simples para o react-router 4+.

const history = createBrowserHistory()

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

<Router history={history}>

Se você estiver executando o React 16.8+, isso é simples de lidar com um componente que irá rolar a janela para cima em cada navegação:
Aqui está o componente 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;
}

Em seguida, renderize-o na parte superior do seu aplicativo, mas abaixo do Roteador
Aqui está em app.js

import ScrollToTop from "./scrollToTop";

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

ou em index.js

import ScrollToTop from "./scrollToTop";

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

Eu tive o mesmo problema com meu aplicativo. Usar o trecho de código abaixo me ajudou a rolar para o topo da página ao clicar no botão seguinte.

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

No entanto, o problema ainda persistia no navegador. Depois de muitas tentativas, percebi que isso era por causa do objeto de histórico da janela do navegador, que tinha uma propriedade scrollRestoration definida como auto. Definir isso como manual resolveu meu problema.

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

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

Em um componente abaixo <Router>

Basta adicionar um React Hook (caso você não esteja usando uma classe React)

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

Quero compartilhar minha solução para aqueles que estão usando, react-router-dom v5uma vez que nenhuma dessas soluções v4 fez o trabalho para mim.

O que resolveu meu problema foi instalar o react-router-scroll-top e colocar o wrapper <App />assim:

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

e é isso! funcionou!

Os ganchos são combináveis ​​e, desde o React Router v5.1, temos um useHistory()gancho. Portanto, com base na resposta de @zurfyx, criei um gancho reutilizável para esta funcionalidade:

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

Um React Hook que você pode adicionar ao seu componente Route. Usando em useLayoutEffectvez de ouvintes personalizados.

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

Atualização : Atualizado para usar em useLayoutEffectvez de useEffect, para menos problemas visuais. Isso se traduz aproximadamente em:

• useEffect: renderizar componentes -> pintar na tela -> rolar para cima (efeito de execução)
• useLayoutEffect: renderizar componentes -> rolar para cima (efeito de execução) -> pintar para a tela

Dependendo se você está carregando dados (pense em spinners) ou se você tem animações de transição de página, useEffectpode funcionar melhor para você.

Minha solução: um componente que estou usando em meus componentes de telas (onde quero rolar para cima).

import { useLayoutEffect } from 'react';

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

    return null;
};

export default ScrollToTop;

Isso preserva a posição de rolagem ao voltar. Usar useEffect () era problemático para mim, ao voltar o documento rolava para cima e também piscava quando a rota era alterada em um documento já rolado.

React hooks 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;

Escrevi um componente de ordem superior chamado withScrollToTop. Este HOC possui dois sinalizadores:

• onComponentWillMount- Se rolar para cima durante a navegação ( componentWillMount)
• onComponentDidUpdate- Se rolar para cima na atualização ( componentDidUpdate). Este sinalizador é necessário nos casos em que o componente não é desmontado, mas ocorre um evento de navegação, por exemplo, de /users/1para /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));
};

Para usá-lo:

import withScrollToTop from './withScrollToTop';

function MyComponent() { ... }

export default withScrollToTop(MyComponent);

Aqui está outro método.

Para o react-router v4, você também pode vincular um ouvinte para alterar o evento de histórico, da seguinte maneira:

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

O nível de rolagem será definido como 0 sem setImmediate()muito se a rota for alterada clicando em um link, mas se o usuário pressionar o botão Voltar no navegador, então não funcionará porque o navegador redefinirá o nível de rolagem manualmente para o nível anterior quando o botão Voltar for pressionado , então, ao usar, setImmediate()fazemos com que nossa função seja executada depois que o navegador terminar, redefinindo o nível de rolagem, dando-nos o efeito desejado.

com o roteador React dom v4 você pode usar

crie um componente scrollToTopComponent como o mostrado abaixo

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)

ou se você estiver usando guias, use algo como o abaixo

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}/>

espero que isso ajude para obter mais informações sobre restauração de rolagem visita lá docs hare react router dom restauração de rolagem

Eu descobri que ReactDOM.findDomNode(this).scrollIntoView()está funcionando. Eu coloquei dentro componentDidMount().

Para aplicativos menores, com 1-4 rotas, você pode tentar hackea-lo com redirecionamento para o elemento DOM superior com #id em vez de apenas uma rota. Então, não há necessidade de agrupar Rotas em ScrollToTop ou usando métodos de ciclo de vida.

No seu router.js, basta adicionar esta função no routerobjeto. Isso fará o trabalho.

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

Como isso,

**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" },
    ]
});

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

Pode ser uma solução simples caso os adereços não sejam alterados e o componentDidUpdate () não seja acionado.

Isso é hacky (mas funciona): acabei de adicionar

window.scrollTo (0,0);

para renderizar ();