React Routerでクエリストリングが付与された際に再描画(レンダリング)したい

Question

前提・実現したいこと

React Routerを利用したルーティング。
クエリストリングが追加されたURLにアクセスした際に再描画したい。

開発環境

※package.jsonのdependenciesを記載します。
こちらで不足ありましたらお手数ですが何を載せたら良いかご教示いただけますと幸いです。

  ...
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  }
  ...

ソース

App.js

import Dog from './Dog';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {

  return (
    <Router>
      <Switch>

        <Route path="/">
          <Dog />
        </Route>

      </Switch>
    </Router>
  );
}

export default App;

Dog.js

import { useEffect, useState } from 'react'
import { Link, useHistory } from "react-router-dom";

import axios from 'axios'

const Dog = () => {

  const [ imageUrl, setImageUrl ] = useState('')

  useEffect(() => {
    axios({
			method: 'get',
			url: 'https://dog.ceo/api/breeds/image/random'
		}).then(response => {
      setImageUrl(response['data']['message'])
		})
  }, [])

  return (
    <>
      <h1>Dog image</h1>
      <img src={ imageUrl } alt='dog'/>
      <p>{ imageUrl }</p>
      <ul>
        <li><Link to='/'>Top</Link></li>
        <li><Link to='/?page=2'>Next</Link></li>
        <NextPageButton />
      </ul>
    </>
  )

}

export default Dog

const NextPageButton = ()=> {
  const history = useHistory();
  return <button onClick={()=> {
    history.push('/?page=3');
  }}>click me!</button>;
}

試したこと

aタグやLinkの他にもソース内にあるhistory.pushを使用してURLの変更なども試してみましたがだめでした。。
かなりｇｇったのですがなかなかこれだ、というものが見当たらず。

補足情報

React Hooks勉強中です。
まずは色々な機能を持つSPAを試しに作っているところなのですがルーティングでハマりました…。

現在React Routerを使用してルーティングを実装しています。
https://reactrouter.com/web/guides/quick-start

以下のようにクエリストリングにパラメータを渡した際にレンダリングしてほしいのですが、URLが変わるだけでレンダリングしてくれません。

http://localhost:3000/
→http://localhost:3000/?page=2
→http://localhost:3000/?page=3

正確にはuseEffectが実行されずに困っています。

Reactは画面に表示している内容に差分がないと再描画しない、というところは理解しています。
しかし、今回のようにクエリストリングがあってURLが変更された場合にAPIをコールしてくれないため、困っています。

解決方法のアドバイスを教えていただけますと幸いです。

参考URL

調査している際に目を通して関係がありそうだと思ったURLです。

公式
react-routerで現在のlocationを取得する2種類の方法の使い分け方
React入門 ～React Router編～
React RouterがHooks対応したので使い方を整理する
Reactがrenderの内容を更新してくれなくてハマった
react-router 同ページ内で再描画されない解決メモ

(修正)パスパラメータを利用した形に修正

App.js

import Dog from './Dog';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {

  return (
    <Router>
      <Switch>

        <Route exact path="/">
          <Dog />
        </Route>

        <Route path="/page:pageNum">
          <Dog />
        </Route>

      </Switch>
    </Router>
  );
}

export default App;

Dog.js

import { useEffect, useState } from 'react'
import { Link, useHistory, useParams } from 'react-router-dom';

import axios from 'axios'

const Dog = () => {

  const [ imageUrl, setImageUrl ] = useState('')

  useEffect(() => {
    axios({
			method: 'get',
			url: 'https://dog.ceo/api/breeds/image/random'
		}).then(response => {
      setImageUrl(response['data']['message'])
		})
  }, [])

  let { pageNum } = useParams();
  if (typeof pageNum === 'undefined') {
    pageNum = 1
  }

  return (
    <>
      <h1>Dog image</h1>
      <h2>{ pageNum }ページ目</h2>
      <img src={ imageUrl } alt='dog'/>
      <p>{ imageUrl }</p>
      <ul>
        <li><Link to='/'>Top</Link></li>
        <li><Link to='/page2'>Next</Link></li>
      </ul>
    </>
  )
}

export default Dog

Comments

[hoshi-takanori]

ここにサンプルがあります。(でも、普通は query よりも /2 とか /page2 とかの方がいい気が…。)
https://reactrouter.com/web/example/query-parameters

[toshiki_]

回答ありがとうございます！
すみません、公式にあったのですね。。

確かにおっしゃるとおりパスパラメータを使用したほうがスムーズに実装できそうですのでそちらをまず試してみました。
※概要欄にソースを載せています。

ですが、こちらでもやはりuseEffectが実行されずapiがコールされないまま「nページ目」の部分だけが更新されてしまう状態です。
こちら解決方法に心当たりがありましたらご教示いただければと思います…。

Answer 1

確かにおっしゃるとおりパスパラメータを使用したほうがスムーズに実装できそうですのでそちらをまず試してみました。
※概要欄にソースを載せています。

ですが、こちらでもやはりuseEffectが実行されずapiがコールされないまま「nページ目」の部分だけが更新されてしまう状態です。

上記ですが、hooksの公式ドキュメントを読み直し、追加したpageNumをuseEffectの第2引数に入れることで実現できました。

  useEffect(() => {
    axios({
			method: 'get',
			url: 'https://dog.ceo/api/breeds/image/random'
		}).then(response => {
      setImageUrl(response['data']['message'])
		})
  }, [pageNum])

ありがとうございました。