React Router UI gets stuck after TanStack Query API request returns 404

I'm having an issue with a React application using React Router, <Outlet>, Axios, and TanStack Query.

The React Router navigation itself is working correctly: the URL changes as expected and the <Outlet> renders the correct page.

The problem occurs on pages that make API requests which return 404 errors, particularly requests from files such as api.employeeRoutes.js and api.dashboard.js.

When these requests fail, TanStack Query keeps retrying them. After navigating to another page and then navigating back, the UI sometimes appears stuck or doesn't render correctly until I refresh the page.

So far, I have confirmed:

• React Router navigation works.

• The URL changes correctly.

• <Outlet> updates correctly.

• Some API requests return 404.

• TanStack Query retries the failed requests.

• The issue seems to occur after navigating away from and back to pages with these failed queries.

• Refreshing the browser makes the UI work again.

I want to understand:

1. Why are the API endpoints returning 404?

2. Why does TanStack Query keep retrying the failed requests?

3. Can these failed queries cause the UI to appear stuck after navigation?

4. What is the proper way to handle 404 errors in TanStack Query so they don't interfere with navigation or page rendering?

5. Should failed queries be configured with retry: false or handled differently?

The main point is that I don't think React Router itself is the problem. The routing works, but failed API requests seem to be causing the page/UI to get stuck after navigation.