Paginação com React Router Dom

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.

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.