Paginação com React Router Dom

Higo Ribeiro -

A paginação em uma página pode até parecer redundante, mas ela é um "órgão vital" para seu website, principalmente quando se trata de listas com enormes quantidades de informação, além de ser extremamente útil para acesso momentâneo, tal qual é a importância de guardar através do link as informações para chegar na mesma posteriormente.

Quando utilizamos um backend que trás o HTML processado para nós, é bem tranquilo trabalhar com elas, todavia tratando-se de SPA isso se torna um pouco chato. A parte "chata" em si não é definir a paginação, mas integrar ela ao browser de uma maneira prática e eficaz.

Adotando uma estratégia

Existe duas principais maneiras de fazer uma paginação, sendo elas:

  • Pela Query String: acrescentando ?page=2;
  • Pelo Path: acrescentando /2/.

Particularmente acho a segunda opção mais elegante e mais fácil de trabalhar, e é sobre ela que abordarei neste post. Quando eu me referir a page, estarei falando sobre o valor que fica na url /:page?/.

A primeira coisa que você precisa entender é que o valor da page pode ser opcional, sendo que quando não tiver nenhum valor é considerado como 1. Para trabalhar com valor opcional no react-router-dom sua URL precisa de uma interrogação no final da variável identificadora:

<Route path="blog/:page?" component={Blog} />

Assim você consegue trabalhar com o page direto dos match.params disponibilizados.

Paginando

Como o foco do post é a parte do browser vou considerar que você já possui o componente de paginação funcionando lisinho, e que o usuário não consegue navegar pelo histórico.

Naturalmente o componentDidMount já possui um método que faz o load dos dados mas provavelmente fixo na página 1, o que precisa ser alterado para acompanhar a page que o usuário passar ao acessar a página:

async componentDidMount() {
  const { page } = this.props.match.params;
  this.loadData(page);
}

E agora a cada page acionado pela paginação ao invés de fazer o resgate direto com o loadData é preciso mudar o page com o history.push e carregar os dados pelo componentDidUpdate, que conseguimos visualizar quais propriedades foram atualizadas e assim carregar as novas informações de acordo com a nova page:

async componentDidUpdate(prevProps) {
  const { page } = this.props.match.params;
  if ( page !== prevProps.match.params.page) {
    this.loadData(page);
  }
}

Ah, poderia colocar o loadPage junto com o history.push mas quando usasse a Arrow back do browser por exemplo não seriam atualizados os dados carregados.

Até mais

Isso é o básico para você ter uma paginação utilizando o browser e um componente de paginação com React, que pode ser adaptado para ter um filtro também.

Espero que com esses conceitos você consiga montar sua página com uma paginação show de bola.

Ah, como sempre, compartilhe com seus amigos DEVs e deixe seu comentário com dúvidas ali em baixo.

Grande abraço.