Headless WordPress: React Router Pagination | https://ibenic.com/headless-wordpress-react-router-pagination

App-1.js

// Adding the React Router
import React, { useState, useEffect } from 'react';
import './App.scss';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";
const axios = require('axios');

App-2.js

function App() {
  // rest of the code ....
  
  return (
    <Router>
      <div className="App">
        <div className="container">
        { loading && <p>Loading</p> }
        <Switch>
            <Route path="/page/:page" render={routeProps => (
                <ArticlePage 
                  currentPage={ currentPage } 
                  articles={ getArticlesForPage( currentPage, articles, articlesPages ) }
                  totalPages={ totalPages }
                  />
              )}>
            </Route>
            <Route path="/:id">
              <Article
                currentPage={ currentPage } 
              />
            </Route>
            <Route path="/" exact>
              <Articles 
                currentPage={ currentPage } 
                articles={ getArticlesForPage( currentPage, articles, articlesPages ) }
                totalPages={ totalPages }
                />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

App-3.js

function App() {
  // rest of the code
  
  /**
  * Using this function to load articles for a page.
  */
  function ArticlePage( props ) {
    let { page } = useParams();
    // Setting the current page so that useEffect loads new articles if we have not cached them yet.
    setCurrentPage( parseInt( page ) );
    
    return (<Articles 
      currentPage={ page } 
      articles={ getArticlesForPage( page, articles, articlesPages ) }
      totalPages={ totalPages }
      />);
  }

  // render part
}

App-4.js

function Articles( props ) {
 
  let pagination = [];

  for( var p = 1; p <= props.totalPages; p++ ) {
    let page = p;
    let className = 'btn';
    if ( page === parseInt( props.currentPage ) ) {
      className += ' btn-primary';
    } else {
      className += ' btn-secondary';
    }
    // Changing the button into Link component so we dont need the setCurrentPage anymore
    // We are now "listening" to the page parameter.
    pagination.push( <Link key={ 'link-page-' + p } className={ className } to={ "/page/" + page }>{ p }</Link> );
  }

  const articles = props.articles.map( ( item, index ) => {
    return <article key={ 'article-' + index }>
    // Adding the link to the item article using slug.
    <Link to={`/${item.slug}`}>
      <h2 dangerouslySetInnerHTML={ { __html: item.title.rendered } }></h2>
    </Link>

    <div className="content" dangerouslySetInnerHTML={ { __html: item.excerpt.rendered } }>

    </div>
       
    </article>
  });
  return (
    <div className="articles">
      { articles }
      { pagination }
    </div>
  )
}

App-5.js

/**
 * Displaying a single article
 */
function Article( props ) {
  const params = useParams();
  return (
    <article>
      <Link className='btn btn-primary' to={ "/page/" + props.currentPage }>Back</Link>
      Article
    </article>
  )
}