Next.jsでページ遷移後、リロードする

ページ遷移後、遷移先をリロードしたいと思い、うまくいったやり方があったので綴ります。

js#home.jsx

'use client'

import {useRouter, useSearchParams} from 'next/navigation';

const Home = () => {
  const searchParams = useSearchParams();
  const router = useRouter();

  //パラメータを割り当てる
  const isReload = seachParam.get('reload');
  const isReload2 = localStorage.getItem('reloaded');
  if (isReload && !isReload) {
    localStorage.setItem('reloaded','true');
    router.replace('/home');
    window.location.reload();
  } else if(!isReload) {
    localStorage.removeItem('reloaded');
  }
  
  return <Child />
}

export default Home;

js#child.jsx

'useClient'
//next/navigationからインポートする
import useRouter from 'next/navigation'

const Child = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push('/home?reload=true');
  }
  
  return <button onClick={handleClick}>遷移する</button>
}

export default Child;

window.location.reload()を実行すると無限にページをリロードしてしまうので少し工夫が必要でした。

初めは下記を記述していました。

let isReload = true;

if (isReload) {
  isReload = false;
  window.location.reload();
}

ダメですね。リロードするたびに変数の値がtrueに戻ってしまうせいで無限リロードしました。

そこでローカルストレージに保存する方法を試すとうまくいきました。

js#home.jsx

const isReload = seachParams.get('reload');
const isReload2 = localStorage.getItem('reloaded');

if (isReload && !isReload) {
  localStorage.setItem('reloaded','true');
  router.replace('/home');
  window.location.reload();
}

初めはローカルストレージに何も入っていないので反転させてtrueを返し、ifの中でtrueをセットするようにしています。
その後、useSearchParamsにパラメータを返さないように置き換えています。

js#home.jsx

} else if(!isReload) {
  localStorage.removeItem('reloaded');
}

上記のelse ifを記述しないと無限にリロードされるので注意です。

それと今回はクライアントサイドで実装しているのでuseRouterをnext/navigationからインポートするところも注意です。