Gatsby.js: Навигация с помощью параметров URL и кнопок браузера «Назад/Вперед»

Ваша страница не перерисовывается, потому что на самом деле это та же самая страница — компонент уже смонтирован. Поскольку вы извлекаете свои данные в constructor(), ваша страница не будет обновляться, потому что конструктор для компонента React вызывается до его монтирования (источник).

То, что вы называете urlParam, всего лишь новая опора, которую componentWillReceiveProps(nextProps) должен получить в nextProps.location.search.

Редактировать:

Вы должны поднять состояние, потому что только корневой компонент будет получать props.location на кнопках браузера назад и вперед. Свойство pathname вашего компонента Articles изменяется, поэтому componentWillReceiveProps здесь никогда не срабатывает.

Код:

/src/страницы/root.js

import React, { Component } from 'react';
import { navigateTo } from 'gatsby-link';

import Articles from '../components/Articles';

export default class Test extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPage: 1,
      data: {}, // your ext data
    };

    this.nextPage = this.nextPage.bind(this);
  }

  nextPage() {
    const { currentPage } = this.state;
    const { pathname } = this.props.location;
    const url = `${pathname}?page=${currentPage + 1}`;

    this.setState({ currentPage: currentPage + 1 });
    navigateTo(url);
  }

  componentWillReceiveProps(nextProps) {
    const { pathname, search } = nextProps.location;
    const getParam = /(\d+)(?!.*\d)/;

    const currentPage = search !== '' ? Number(search.match(getParam)[0]) : 1;

    /* get your ext. data here */
    const data = {};

    this.setState({ currentPage, data });
  }

  render() {
    const { currentPage, data } = this.state;
    return (
      <div>
        {/* other contents here */}
        <Articles
          nextPage={this.nextPage}
          currentPage={currentPage}
          data={data}
        />
      </div>
    );
  }
}

/src/components/Articles.js

import React from 'react';

const Articles = ({ nextPage, currentPage }) => {
  return (
    <div>
      <div>Page: {currentPage}</div>
      <button onClick={() => nextPage()}>Next Page</button>
    </div>
  );
};

export default Articles;

Это можно решить с помощью объекта истории, присутствующего внутри объекта окна.

Другой способ — использовать React-Router-DOM, который является последним модулем маршрутизации для маршрутизации в приложениях ReactJS. Поэтому для ссылки на маршрутизатор V4 следуйте этому коду.

  import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';

После импорта маршрутизатора просто попробуйте определить внутри него корневой компонент, после чего вы сможете создавать внутри него маршруты.

  <Router>
    <div className="App" id="App">
      <Route path="/" exact component={Home}/>
      <Route path="/about" exact component={About}/>  
      <Route path="/misreports" exact component={MISReport}/>  
      <Route path="/contact" exact component={Contact}/>  
    </div>
  </Router> 

имейте в виду, что маршрутизатор должен содержать только одного дочернего элемента, иначе он не будет работать должным образом. Таким образом, с маршрутизацией становится очень легко работать.