navigate is not work when the CatchBoundary catch the error thrown by child route

[Asfamilybank]

Which project does this relate to?

Router

Describe the bug

navigate is not work when the CatchBoundary of the father route and it catch the error thrown by beforeLoad function of child route.

I want to use CatchBoundary component to catch child route error, keep the layout not change, after this, my navigate is not work.

Your Example Website or App

https://stackblitz.com/edit/github-ybhmkk

Steps to Reproduce the Bug or Issue

• click the 403 page navigate menu, and it will throw the forbidden error and render the error component.
• click the home page navigate menu, the error component is not clear

Expected behavior

As a user, l expected the error component unmount and navigate to home page, but i am seeing the url change to /home, but page is not change.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 131.0.6778.70

Additional context

No response

[hipstersmoothie]

Think I'm seeing the same thing. I am trying to change the reset key but that doesn't seem to work the first few clicks

[hipstersmoothie]

Fixed by doing this in my error boundary component

[Asfamilybank]

Fixed by doing this in my error boundary component

@hipstersmoothie this is not work in my repo. 😢
this is a fork repo:
https://stackblitz.com/edit/github-ybhmkk-drbsfb?file=src%2Froutes%2F-error-component.tsx

[Asfamilybank]

Fixed by doing this in my error boundary component

@hipstersmoothie this is not work in my repo. 😢 this is a fork repo: https://stackblitz.com/edit/github-ybhmkk-drbsfb?file=src%2Froutes%2F-error-component.tsx

I try to use the reset function in error component props that is work.

export function ErrorComponent({ error, reset }: ErrorComponentProps) {
  const routerState = useRouterState();
  const ref = useRef(routerState.location.pathname);

  useEffect(() => {
    if (routerState.location.pathname !== ref.current) {
      reset();
    }
  }, [routerState.location.pathname]);

  if (error instanceof ForbiddenError) {
    return (
      <>
        <p>403 forbidden!</p>
        <p>{error.message}</p>
        <button onClick={() => reset()}>Retry again</button>
      </>
    );
  }

  return 'error component';
}

[Asfamilybank]

So, is this a feature or a bug?