Is it possible to render errorElement inside the outlet ?

[AMoktar]

Hello guys, I'm wondering if I can render errorElement inside the outlet so, I don't lose my layout design ?

open to any ideas
thanks

createBrowserRouter([
        {
            path: "/",
            element: <Layout />,
            errorElement: <>eerrrr</>, // this error should be rendered inside the <Layout />
            children: [
                {
                    path: "",
                    element: <Home />,
                },
                {
                    path: "cart",
                    element: <Cart />,
                },
                {
                    path: "products",
                    element: <Products />,
                },
                {
                    path: "products/:id",
                    element: <ProductForm />,
                },
                {
                    path: "register",
                    element: <RegisterForm />,
                },
                {
                    path: "login",
                    element: <LoginForm />,
                },
                {
                    path: "logout",
                    element: <Logout />,
                },
                {
                    path: "account",
                    element: <Account />,
                },
            ],
        },
    ]);

[ryanflorence]

Pathless routes work great for this, wrap all your child routes in another parent route that only has an error element.

createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        // has nothing but an error element
        errorElement: <ErrorPage />,

        // and then put the children under this route:
        children: [
          {
            path: "",
            element: <Home />,
          },
          {
            path: "cart",
            element: <Cart />,
          },
          // ... etc.
        ],
      },
    ],
  },
]);

Now any errors inside of the children will render inside of the <Layout/>.

[Carda24]

@AMoktar Solution are by star setting like in this example: https://github.com/remix-run/react-router/tree/main/examples/route-objects
Its same solution like in v5. I am little sad in App need two flow for catch NotFoundExcetion and NotMatch bouth are 404 NotFound.

{
      path: "/",
      element: <Layout />,
      children: [
        { index: true, element: <Home /> },
        {
          path: "/courses",
          element: <Courses />,
          children: [
            { index: true, element: <CoursesIndex /> },
            { path: "/courses/:id", element: <Course /> },
          ],
        },
        { path: "*", element: <NoMatch /> },
      ],
    },
  ];

[juzerzarif]

@ryanflorence The top level pathless route seems to catch errors thrown from the children but not react-router's own 404 errors when none of the routes in the router match.

[wheresthecode]

My solution is to pass an optional property to the Layout element that can override the Outlet. Not sure if there are any pitfalls in doing this.

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootRoute />,
    errorElement: <RootRoute outlet={<ErrorRoute />} />,
    children: [
      {
        path: "/",
        children: [
          {
            path: "about",
            element: <AboutRoute />,
          },
          {
            path: "/",
            element: <HomeRoute/>,
          }
        ],
      },
    ],
  },
]);

interface IRootRoute {
  outlet?: any;
}

export const RootRoute = (props: IRootRoute) => {
  return (
    <ThemeProvider theme={theme}>
      <SiteAppBar/>
      {props.outlet ? props.outlet : <Outlet />}
    </ThemeProvider>
  );
};

[Some14u]

This creates a new instance of RootRoute, which is ok-ish in many cases, unless RootRoute has it's own state.

[robwhess]

@Some14u, that's not necessarily an issue, since React preserves state based on a component's position in the application tree.

I still think this kind of workaround shouldn't be necessary. It seems to me like a bug (or misleading documentation) that a pathless element doesn't work for "404" errors in simple situations like this the way the React Router documentation implies it should and the way @ryanflorence explicitly said it should just above (I can confirm that the router code he included in his comment here just results in React Router's default error page being displayed for an invalid URL).

[vincentparrett]

How would you do this when using createRoutesFromElements (which I much prefer over the above - easier to visualise the routes) ?

[devpeerapong]

This should work
https://reactrouter.com/en/main/route/route#type-declaration

 <Route path="/" element={<Layout />}>
    <Route errorElement={<ErrorPage />}>
      <Route path="" element={<Home />} />
      <Route path="cart" element={<Cart />} />
    </Route>
  </Route>

[vincentparrett]

Of course, thanks.. will give it a go.

[joerter]

I think what you want to do here is return a json response from your action and then use useActionData in your component to read the error and rerender with the error message.

[Some14u]

This is not ideomatic approach. What's the point of having errorElement while not being able to use it to deliver the message into the right place?

Suppose I have the login route, and i want it to handle the "login/password is wrong" errors. Following your suggestion, i would need to parse the response inside the action, then return json with artificial "errors" that are not errors but rather a way to convey the message to the login component.
And then, inside the login component I would unparse the json response (a second parsing) and show the appropriate ui to the user.

Why cant i simply have a separate errorElelement, that would receive the errors (in case they are) and return an error outlet (or throw if error isn't recognised), which then will be passed to the login component?

[aCuriousDev]

Hi @AMoktar Here is another approach with pathless routes, I added a catch-all route as a child route using the * selector and then my routes at the same depth level. Yet there is a flaw I have to overcome : you do not trigger a RouteError and so no HTTP Error Response is produced, you might want to set it up manually using loader and useActionData as @joerter suggested, but I haven't done it yet.
I'll be glad to receive some feedback on this !

const router = createBrowserRouter([
  {
    path: "/",
    element: <MainLayout />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "*",
        element: <ErrorPage />,
      },
      {
        path: "home",
        element: <Home />,
      },
      {
        /* Add any routes you'd like */
      }
    ]
  }
]);

[matsad3547]

This guy's solution worked for me

[efojs]

Thank you good sir!

[aCuriousDev]

Thank you, a very interesting way of handling this problem !

[devcrev]

Nice. Thank you!