🍎
Remixでroot.tsxに定義したloader関数を特定ページだけ処理しないようにする
はじめに
Remixでroot.tsxにloader関数を定義すると、どのページ遷移時でも必ず呼び出される共通処理的に実装することができます。
具体例を挙げると、_index（ルート）と/hogeという2つのページがあり、_index → /hogeと画面遷移すると、下記の順でloader関数が実行されます。
- root.tsxのloader関数（_index.tsx 実行時）
- root.tsxのloader関数（hoge.tsx 実行時）
- hoge.tsxのloader関数
app/root.tsx
export function loader() {
console.log("どのページでも毎回呼ばれる確認");
return null;
}
export function Layout({ children }: { children: React.ReactNode }) {
return (
~~~ 以下略 ~~~
app/routes/_index.tsx
export default function Index() {
return (
~~~ loader関数の定義なし ~~~
~~~ 以下略 ~~~
app/routes/hoge.tsx
export function loader() {
console.log("/hogeで呼ばれている確認");
return null;
}
export default function Index() {
return (
~~~ 以下略 ~~~
特定パスのときだけroot.tsxのloader関数の処理スキップしたいなーと思うケースがあったので、解決方法を考えてみます。
解決策：現在のパスを取得して特定のパスだったら早期returnする
root.tsxのloader関数の引数requestとURL()使って、特定パスだった場合はスキップするような処理に変更します。
app/root.tsx
export function loader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url);
const pathname = url.pathname;
if (pathname === "/fuga") {
return null;
}
console.log("どのページでも毎回呼ばれる確認");
return null;
}
これで/fuga遷移時にはroot.tsxのloader関数は処理がスキップされるようになりました。
さいごに
他に良いやり方あったら教えて欲しいです。
確認用のリポを貼っときます。
Discussion