React

820 readers

1 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

[email protected]

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

[email protected]

[Solved] How to properly throw a 404 status in react router 6? (self.react)

submitted 11 months ago* (last edited 11 months ago) by OwlPaste to c/[email protected]

4 comments fedilink hide all child comments

Using react router and have a route definition:

  {
       path: '/',
       element: <Root pageTitle={pageTitle} />,
       errorElement: <ErrorPage setPageTitle={updatePageTitle} />,
       children: [
          ...
          {
             path: '*',
             element: <ErrorPage setPageTitle={updatePageTitle} />,
             loader: async () => {
                throw new Response('Not Found', { status: 404 });
             },
          },
       ],
    },

This shows me 404 page how I want but without the rest of the root element but also the http status is reported as 200. How do I properly throw it as a 404 and show it inside root element?

you are viewing a single comment's thread
view the rest of the comments

[–] ante 1 points 11 months ago (1 children)

No problem. Is there something you were trying to accomplish with the 404?

[–] OwlPaste 1 points 11 months ago

Well coming from a non react web land, i figured if its a non existent page, it should throw a 404 status. It didn't occur to me to check if its even making a request beyond initial load (which was where i was seeing 200's from and getting confused)