Add note to docs on layout useLoaderData restriction #8958
Conversation
|
docs/file-conventions/root.md
Outdated
| export function Layout({ | ||
| children, | ||
| }: { | ||
| children: React.ReactNode; | ||
| }) { | ||
| const data = useRouteLoaderData("root"); | ||
| const error = useRouteError(); | ||
| return <html>...</html>; | ||
| } |
There was a problem hiding this comment.
Only suggestion I have is including a little more example of what you would do with this information. Open to a better example, just figure this might help folks understand the purpose a bit better
| export function Layout({ | |
| children, | |
| }: { | |
| children: React.ReactNode; | |
| }) { | |
| const data = useRouteLoaderData("root"); | |
| const error = useRouteError(); | |
| return <html>...</html>; | |
| } | |
| export function Layout({ | |
| children, | |
| }: { | |
| children: React.ReactNode; | |
| }) { | |
| const data = useRouteLoaderData("root"); | |
| const error = useRouteError(); | |
| return ( | |
| <html> | |
| <head>{/* */}</head> | |
| <body> | |
| {data ? ( | |
| <RouteLayout>{children}</RouteLayout> | |
| ) : ( | |
| <ErrorLayout>{children}</ErrorLayout> | |
| )} | |
| <ScrollRestoration /> | |
| <Scripts /> | |
| </body> | |
| </html> | |
| ); | |
| } |
There was a problem hiding this comment.
I think a dynamic stylesheet link could be a good example and a real use case :) Something like:
<link rel="stylesheet" href={data.themeStylesheetURL} />
There was a problem hiding this comment.
Adding analytics using an env variable from the root loader is a good use case
If useRouteLoaderData("root") returns a value, you render <Analytics token={loaderData.env.analytics} />, otherwise you don't
There was a problem hiding this comment.
It's tricky because there are other ways to do both of these. I prefer I prefer doing the dynamic stylesheet via meta, and the <Analytics> component could probably be done via the root component - but I do understand folks will want to put stuff that feels "global" like this in the Layout. I updated with the Analytics example and the CSS custom property example from the linked discussion. 👍
There was a problem hiding this comment.
@brophdawg11 thank you very much! I note that you recommend meta for dynamic stylesheet <link>s but the doc precisely discourages the meta export for stylesheets in favor ot the links one instead (which can't depend on the data):
For asset links like stylesheets and favicons, you should use the links export instead.
I always want to follow the official recommendations but this use case seems to be in a grey area. Could you maybe add to the docs that dynamic links are an exception of what is tolerated in the meta export? It's not ideal though because it's not the intention of this export (made for SEO). Any suggestion? :)
There was a problem hiding this comment.
The link here depended on loader data so it could not be done in links and would have to be done in meta (or could also be done in Layout)
Co-authored-by: houmark <lars@houmark.com>
Co-authored-by: houmark <lars@houmark.com>
Added some docs to clear up confusion around the inability to use
useLoaderDatain aLayoutcomponent when rendering an error boundarySee #8951 and #8846.