Replies: 2 comments
-
show a codesandbox reproduction please |
Beta Was this translation helpful? Give feedback.
0 replies
-
use function TError() {
const navigate = useNavigate();
const { reset } = useQueryErrorResetBoundary();
return (
<>
<h1>Error</h1>
<button
onClick={() => {
reset();
navigate(".", { replace: true });
}}
>
retry
</button>
</>
);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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 theerrorElement
to the root object of the router. In theerrorElement
component I use the useQueryErrorResetBoundary hook and call thereset()
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
theuseQueryErrorResetBoundary
is not used.Could you please suggest how to properly reset errors inside
errorElement
with usinguseQueryErrorResetBoundary
for the current version of react-router?Beta Was this translation helpful? Give feedback.
All reactions