Error handling in root.tsx as soon as loader is in use #9681
-
|
I started a new project by running In the import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
} from "@remix-run/react";
import "./tailwind.css";
import { LoaderFunctionArgs } from "@remix-run/node";
export const loader = async ({ request }: LoaderFunctionArgs) => {
return {
message: "loader",
};
};
export function Layout({ children }: { children: React.ReactNode }) {
const { message } = useLoaderData<typeof loader>();
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}In general this is working fine as long no errors occur somewhere else. As soon I open an unknown route like localhost:3000/test I get the following error: Without the loader I get a 404 screen, and on the index page I get the value is available like expected. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
The |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the explanation. I adjusted the code like below and it is working now. Since I merged the Layout and App component to fix the problem. What is the benefit to have the two components in the root file by default? import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
} from "@remix-run/react";
import "./tailwind.css";
import { LoaderFunctionArgs } from "@remix-run/node";
export const loader = async ({ request }: LoaderFunctionArgs) => {
return {
message: "loader",
};
};
export default function App() {
const { message } = useLoaderData<typeof loader>();
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
If you look at this documentation piece: export default function App() {
return <Outlet />;
}
export function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
return (
<>
<h1>
{error.status} {error.statusText}
</h1>
<p>{error.data}</p>
</>
);
}
return (
<>
<h1>Error!</h1>
<p>{error?.message ?? "Unknown error"}</p>
</>
);
}If it didn't export the <html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>Into both the |
Beta Was this translation helpful? Give feedback.
The
Layoutelement is supposed to be used to render html markup in both the case of an error and a valid page, which means you can't use auseLoaderDatahook inside of it because in case of anErrorBoundaryit doesn't exist. Try moving your useLoaderData to theAppexport. Whatever you return from theAppwill be rendered inside theLayoutaschildren