epicweb-dev / full-stack-foundations

Learn the foundational skills of building full stack web applications.
https://epicweb.dev/workshops/full-stack-foundations
Other
586 stars 152 forks source link

[07. Error Handling / 05. Not Found]: default export in the splat route #61

Closed lytovka closed 10 months ago

lytovka commented 10 months ago

In the material for this exercise, we are asked to add a default export to the routes/$.tsx page:

Finally, you'll want to 🐨 export a default export so Remix treats this route as a regular page (otherwise it'll be treated as a Resource Route):


// ...

export default function NotFound() { // due to the loader, this component will never be rendered, but we'll return // the error boundary just in case. return }

// ...


However, if the default `NotFound` export is omitted, the route seems to be treated as a page. In other words, it is sufficient to only export the `ErrorBoundary` component (as a named export) in order for a route to become a page. For example, this works the same way as the proposed solution in the material:

<details>
<summary>routes/$.tsx</summary>

```tsx
import { Link, useLocation } from '@remix-run/react'
import { GeneralErrorBoundary } from '../components/error-boundary.tsx'

export async function loader() {
    throw new Response('Not found', { status: 404 })
}

export function ErrorBoundary() {
    const location = useLocation()
    return (
        <GeneralErrorBoundary
            statusHandlers={{
                404: () => (
                    <div className="flex flex-col gap-6">
                        <div className="flex flex-col gap-3">
                            <h1>We can't find this page:</h1>
                            <pre className="text-body-lg whitespace-pre-wrap break-all">
                                {location.pathname}
                            </pre>
                        </div>
                        <Link to="/" className="text-body-md underline">
                            Back to home
                        </Link>
                    </div>
                ),
            }}
        />
    )
}

I'm not sure if this is intentional behavior of Remix. Maybe it's worth reaching out to the Remix team directly to inquire about it. But it appears that the solution could be simplified, and I'm curious to know your thoughts on this. Thank you!

kentcdodds commented 10 months ago

I've pushed a fix for this. Thank you!