Как добавить экран загрузки в неоднозначные совпадения маршрутизатора React?

Question

Компонент приложения :

function App() {
  const links = ["page-1", "page-2", "page-3"].map(item => {
    return (
      <Link key={item} to={"/" + item}>
        {item}
      </Link>
    );
  });

  return (
    <BrowserRouter>
      <>
        <nav>
          <Link to="/">Home</Link>
          {links}
        </nav>

        <div className="app">
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/:pagename" component={Page} />
          </Switch>
        </div>
      </>
    </BrowserRouter>
  );
}

Компонент страницы :

Page extends Component {
  constructor(props) {
    super(props);

    this.state = { loading: true };

    setTimeout(() => {
      this.setState({ loading: false });
    }, 500);
  }

  render() {
    return this.state.loading ? (
      <h1>Loading...</h1>
    ) : (
      <h1>{this.props.match.params.pagename}</h1>
    );
  }
}

Задача

Мне нужен экран загрузки, когда React переключается между страницами. Там нет проблем, когда он начинается с "/". Однако при переключении между, скажем, "/ page-1" и "/ page-2" не отображается экран загрузки, несмотря на функцию setTimeOut().

Это работает, когда я сначала переключаюсь на "/". А.К.А. из "/ page-1" в "/", а затем в "/ page-2". Как сделать, чтобы экран загрузки отображался при переключении на "/ page-2" из "/ page-1"?

Answer 1

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

Page extends Component {
 constructor(props) {
 super(props);

 this.state = { loading: true };
}

componentWillReceiveProps(nextProps){
 this.setState({ loading: true });
 setTimeout(() => {
   this.setState({ loading: false });
 }, 1000);
}

render() {
  return this.state.loading ? (
     <h1>Loading...</h1>
     ) : (
     <h1>{this.props.match.params.pagename}</h1>
  );
 }
}

Answer 2

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

В этих обстоятельствах я рекомендую попробовать componentWillRecieveProps и проверить, изменяется ли параметр pagename:

componentWillReceiveProps(nextProps) {
    if(this.props.match.params.pagename !== nextProps.match.params.pagename) {
        this.setState({ loading: true });
        setTimeout(...);
    }
}