💨
「Remix V2」で「./app/root.tsx」と「./app/routes/_index.tsx」の意味と違い
rootと_indexはどちらも(/)ルートディレクトリに表示される内容です。
rootにはグローバルCSSの読み込みと全体レイアウトを定義します。ここにサイドバーやヘッダーを記述する場所
<body>
の直下で {children/*_index.tsxを表示*/}
propsを使っているコードがあるが、これがroutes/_index.tsx
の呼び出し部分です。routesフォルダのファイルのidndexはアンダーバーをつけると(/)になり、アンダーバーを外してroutes/index.tsx
とすると(/index)になる。
つまり、ページを増やしたいならアンダースコアを外したファイルを作ればいいのです。
・アンダースコア有り
・アンダースコア無し
root.tsx
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";
import stylesheet from "~/tailwind.css?url";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
];
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children/*_index.tsxを表示*/}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}
_index.tsx
import type { MetaFunction } from "@remix-run/node";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};
export default function Index() {
return (
<div>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</div>
);
}
Discussion