Paginação com React Router Dom

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.

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.