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?

  • ante@lemmy.world
    link
    fedilink
    English
    arrow-up
    4
    ·
    11 months ago

    React-router is client-side routing. You’re not making an HTTP request, so there’s no status code to set. If you’re doing server-side rendering that’s a different story but as it stands you can’t accomplish what you’re wanting and frankly I’m not sure why you would want to.

      • ante@lemmy.world
        link
        fedilink
        English
        arrow-up
        1
        ·
        11 months ago

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

        • OwlPaste@lemmy.worldOP
          link
          fedilink
          English
          arrow-up
          1
          ·
          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)