Comments (10)
If you need 404 to execute the root loader, add a splat route and throw a 404 response. This will force Remix to go through the usual route process.
// routes/$.tsx
export function loader() {
throw new Response('Not Found', { status: 404 });
}
export default function Component() {
return null;
}
https://stackblitz.com/edit/remix-run-remix-z7wwii?file=app%2Froutes%2F%24.tsx
from remix.
Yep, this solved the problem for me! Thank you!
Feel free to close the issue if non-existing routes not triggering the root loader is considered working as expected.
from remix.
I'm going to close this out as expected since without a splat route no route paths match so there's no root match to render. The splat route solution recommended above is the correct solution.
As for the FOUC, I believe that's expected but if you wouldn't mind opening a new issue we could use that to discuss and confirm.
From a quick look, I think it's a vite dev only issue since vite does a request for a 304 not modified response for assets in dev mode - if you do npm run build
/npm run start
and leverage caching headers the browser can re-use the stylesheet across the switch from UI to Error Boundary so there's no flash.
The reason the layout get's unmounted/remounted is that under the hood the React Router tree looks essentially like this:
let routes = [{
id: 'root',
path: '/',
element: <Layout><RootComponent /></Layout>,
errorElement: <Layout><RootErrorBoundary /></Layout>,
children: ...
}];
So it's a new React.createElement
call for Layout
when it's being used as the component versus the error boundary. There's not really any place "above" there to use the same instance but maybe it's possible we could investigate that as part of the new issue.
The workaround for now is to use a pathless route for the error boundary which would allow the root Layout to remain mounted when going from UI to 404 routes:
root.tsx // Layout
routes/_pathless.tsx // ErrorBoundary
routes/_pathless._index.tsx
routes/_pathless.$.tsx
from remix.
This might give you the answer
from remix.
Thanks! Checked it out and it suggests to use the useRouteLoaderData
which i'm already using. It returns undefined
for a URL with no matching route even though the loader can still be run and return data without any errors. I have updated the Expected/Actual Behavior sections to make it more clear.
from remix.
Take a look at https://github.com/kiliman/remix-global-data
This explains the reasons and gives a possible solution.
from remix.
I couldn't find any explanation for the problem i described in the linked article. It explains why useLoaderData
should not be used within ErrorBoundary
and suggests to use useRouteLoaderData
instead and check its result for undefined
which i'm already doing. The issue is that when hitting a URL for which there is no route registered the root loader doesn't seem to run at all and therefore useRouteLoaderData("root")
returns undefined
.
Also, not sure the global data approach suggested by the article would work for the CSP nonce since it has to be generated on every request and not just once when the app starts.
from remix.
Remix doesn't bother calling the root loader for a route that doesn't exist. That's why even useRouteLoaderData('root')
returns undefined
.
What data are you trying to show in your ErrorBoundary
?
from remix.
Well, /non-existent
is still a child of /
so just logically i would expect the root loader to run for it too 🤓
- The use-case for it is a layout that's shared between root route and root error boundary (what
Layout
export is for). Let's say there is a navbar with current user information. This information is loaded from the root route and in my error boundary i would still want to show that navbar so i need the root loader data. - Another thing is the CSP nonce which has to be provided to
ScrollRestoration
andScripts
components. The nonce is also loaded in the root loader. If the data is not there then the scripts execution will be blocked by CSP and Remix documentation states that at leastScripts
has to be present in root error boundary.
You'll want to make sure to still render the Links, Meta, and Scripts components because the whole document will mount and unmount when the root error boundary is rendered.
Please, check the stackblitz that i provided. It highlights both of the above use-cases.
from remix.
Noticed one thing though. The Layout
doesn't seem to help with FOUC when going back and forth between error boundary and regular content. Here is the updated stackblitz with styles to make it noticeable:
https://stackblitz.com/edit/remix-run-remix-cqfze8?file=app%2Froutes%2F_index.tsx
This probably deserves a separate issue. There is one issue closed that looks similar to what i'm experiencing - #1136 (comment)
Edited: the FOUC doesn't happen 100% of the time. Seems like it has something to do with how fast you actually click back/forward after landing on a page.
from remix.
Related Issues (20)
- Relative path does not resolve correctly with flat file routes with redirect HOT 5
- [vite] Files shared between Remix and Express are loaded twice HOT 2
- `TypeError: Can't modify immutable headers.` in handleDataRequestRR (Cloudflare Pages) HOT 2
- When use custom routes, pages use `root.tsx` Layout only and skip own by prefix pattern HOT 1
- Vulnerability detected in library Braces
- [Vite] Remix probably serves malformed response HOT 4
- Node Fetch: Cannot cancel a stream that already has a reader HOT 3
- Random preloads added for images HOT 1
- `assetsDir` not properly resolved when using `basename` when using Wrangler HOT 1
- Splat Routes that would have been prioritized can be overridden by Dynamic Segments. HOT 7
- remix hydration error when using gtag HOT 1
- [Vite] [Cloudflare] dev server start failed with http_proxy environment variable
- Onclick handler not working in remix and problem installing tailwindcss HOT 5
- MetaFunction data type not inferred from clientLoader HOT 3
- Application Error: failed to execute insertBefore on Node HOT 22
- Vitest looks for package.json in every workspace when using vitePlugin HOT 2
- [BUG]: cloudflareDevProxyVitePlugin: Issue in DEV with Remix/Vite/Drizzle/Cloudflare Pages/Supabase/Postgres HOT 2
- Can't import node_module SVG HOT 2
- Streaming does work not on Vite/MacOS HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix.