AppRouterのIntercepting Routesを利用したモーダルを閉じるときに別ページに移動したい
2024-01-25
10 months ago
開発環境
- next 14.0.4
前提
AppRouterのIntercepting Routesを利用したモーダルがすでに実装されていることが前提です。
本題
公式ドキュメントにもあるように、通常はrouter.back()でモーダルを閉じます。
ただ、別の場所に移動してモーダルを閉じたい時があります。
その時、例えばrouter.push(”/mypage”)と遷移したいページにpushしたとしてもうまく画面遷移しません。
公式ドキュメントを見ると以下のような記述があります。
別の場所に移動してモーダルを閉じたい場合は、キャッチオール ルートを使用することもできます。
export default function CatchAll() {
return null
}app/@auth/[...catchAll]/page.tsx
これもうまく機能していない？ようです。（v14.0.4時点）
なので、ハック的なやり方で対処します。
モーダルのページを以下のように実装します。
'use client';
import { usePathname } from 'next/navigation';
import { SampleModal } from '@/features/sample';
export default function SampleModal() {
const pathname = usePathname();
const shouldShow = pathname.includes('/sample/');
if (!shouldShow) return null;
return <SampleModal />;
}URLが/sampleで開くモーダルを想定し、今のURLがsampleでない場合にモーダルを表示しないようにします。
さいごに
一旦これでエラーなく意図してページに遷移できました。
ただ、これで良いのか・・