How to reset query errors in errorElement in react-router?

[levensta]

I recently updated the react-router and rewrote the router config as an RouteObject using createBrowserRouter. Along with this, I changed the approach to catching errors on the page and instead of a QueryErrorResetBoundary above the Outlet component, I wrote a component that is passed in the errorElement to the root object of the router. In the errorElement component I use the useQueryErrorResetBoundary hook and call the reset() function to reset query errors, but after that the page is not re-rendered and queries are not re-fetch.

In the documentation I found an example for react-router v6.4+ https://tanstack.com/query/v5/docs/framework/react/examples/react-router with RouteObject interface, but in this example on the error page in errorElement the useQueryErrorResetBoundary is not used.

Could you please suggest how to properly reset errors inside errorElement with using useQueryErrorResetBoundary for the current version of react-router?

[TkDodo]

show a codesandbox reproduction please

[tychenjiajun]

use navigate('.', { replace: true }) in errorElement

function TError() {
  const navigate = useNavigate();
  const { reset } = useQueryErrorResetBoundary();

  return (
    <>
      <h1>Error</h1>
      <button
        onClick={() => {
          reset();
          navigate(".", { replace: true });
        }}
      >
        retry
      </button>
    </>
  );
}

[basaran]

This probably doesn't work with createBrowserRouter, if you are not using react-router's loaders, data router.

In the docs, it is stated the error element is for the data router, and somewhat suggest to keep using the react-error-boundary library for other intends and purposes as I understand it.