既存のコード
Remixでルートレイアウト(root.tsx)にサイドメニュー＋コンテンツのレイアウトを作成
root.tsx
export default function App() {
return (
<html lang="jp">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body className="flex min-h-screen">
<Sidebar />
<div className="flex-1 p-5">
<Outlet />
</div>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
既存のルート構造
ホーム画面にレイアウトが適応される
ログイン画面にも適応される（当たり前）
ルートの変更
Remixドキュメントを見ながらルートを変更
RemixDocs-RouteFileNaming
変更
_authはURLから無視され、.は/に変換される。
_auth.tsxで_auth以下のページのレイアウトを定義できるらしいです。
変わらない…😥
原因はroot.tsxをサイドメニュー＋コンテンツのレイアウトにしているから
_auth.tsxにレイアウトを定義しても、親のルートレイアウト(root.tsx)を継承するのでサイドメニューが表示される。
回避方法としては
①root.tsxをサイドメニュー無しにして、_auth以外のルートにはサイドメニューを付ける。
→ディレクトリが増えるたびにサイドメニューコンポーネントを入れるのは微妙では…
②root.tsxでレイアウトを分岐させる。
→一旦、こちらで対応
root.tsxでレイアウト分岐（暫定）
root.tsx
export default function App() {
const location = useLocation();
// ログインやサインアップのルートではサイドメニューを非表示にする
const isAuthRoute = location.pathname.startsWith("/login") || location.pathname.startsWith("/signup");
return (
<html lang="jp">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body className="min-h-screen">
{!isAuthRoute && (
<div className="flex">
<Sidebar />
<div className="flex-1 p-5">
<Outlet />
</div>
</div>
)}
{isAuthRoute && (
<div className="flex-1 p-5">
<Outlet />
</div>
)}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
サイドメニュー無しのレイアウトになった。
ログイン後はサイドメニュー有り
まとめ
とりあえずレイアウトは分けれたのですが、これがベストなのかよく分からず…
フロントエンドはあまり得意ではないので、公式ドキュメントや記事を探したいと思います。