Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Docs]: Mysterious exports in app/root.jsx #12183

Open
tschaub opened this issue Oct 23, 2024 · 1 comment
Open

[Docs]: Mysterious exports in app/root.jsx #12183

tschaub opened this issue Oct 23, 2024 · 1 comment
Labels
docs

Comments

@tschaub
Copy link

tschaub commented Oct 23, 2024 •
edited
Loading

Describe what's incorrect/missing in the documentation

In the manual installation instructions, it suggests creating an app/root.jsx file that exports Layout, HydrateFallback, ErrorBoundary, and a default component.

react-router/docs/start/installation.md

Lines 63 to 91 in 31a9ad8

import {
Outlet,
Scripts,
ScrollRestoration,
} from "react-router";
export function Layout() {
return (
<html lang="en">
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export function HydrateFallback() {
return <div>Loading...</div>;
}
export default function Root() {
return <h1>Hello, world!</h1>;
}
export function ErrorBoundary() {
return <h1>Something went wrong</h1>;
}

It looks to me like the Layout export is used when rendering the root route, but that the default export (named Root in the module) is unused (the "Hello, world!" content is not rendered).

Later, the docs say "Every route in routes.ts is nested inside the special app/root.tsx module."

This leaves me with a few questions:

  1. Should the Layout component in app/root.jsx render the children prop (instead of rendering <Outlet/>)?
  2. Should the default export from app/root.jsx render <Outlet/>?
  3. Could the docs describe more specifically how the default and other named exports from app/root.jsx (especially Layout) are used (instead of just saying routes are "nested" in the special root module)?

I really appreciate the manual instructions and understand that this dev branch is still a work in progress.
@tschaub tschaub added the docs label Oct 23, 2024
@oliverjam
Copy link

Yeah I found this confusing. It looked like the default Root export wasn't used anywhere, so I deleted it. This seemed fine in dev, but when I pre-rendered to HTML my pages were missing the stuff from Layout (i.e. just bare page HTML like <h1>About page</h1>.

I assume the presence of the default export is required for Layout to work somehow?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tschaub @oliverjam