React Location Router doesn't work after changing state in Redux - redux

Question

I'm using #tanstack/react-location in React Typescript project + 'react-redux'.
When I change redux auth state (login, logout) I also make my MainNavigation changing. Some Links are added or removed. And when it happens the router stops working.
Updated Links are working, url is changing, but Router isn't responding.
After refresh Router works again.
App.tsx
...
<Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
MainNavigation.tsx
<header className="header">
<Link to="/" getActiveProps={getActiveProps}>
<div className="logo">RS Lang</div>
</Link>
<nav>
<ul>
<li>
<Link to="/" getActiveProps={getActiveProps}>
Home
</Link>
</li>
<li>
<Link to="/team" getActiveProps={getActiveProps}>
Team{' '}
</Link>
</li>
<li>
<Link to="/textbook" getActiveProps={getActiveProps}>
Textbook
</Link>
</li>
{isLoggedIn && (
<li>
<Link to="/dictionary" getActiveProps={getActiveProps}>
Dictionary
</Link>
</li>
)}
<li>
<Link to="/games" getActiveProps={getActiveProps}>
Games
</Link>
</li>
{!isLoggedIn && (
<li>
<Link to="/auth" getActiveProps={getActiveProps}>
Login|SignUp
</Link>
</li>
)}
{isLoggedIn && (
<li>
<Link to="/profile" getActiveProps={getActiveProps}>
Profile {authState.user.name}
</Link>
</li>
)}
{isLoggedIn && (
<li>
<button type="button" onClick={logoutHandler}>
Logout
</button>
</li>
)}
</ul>
</nav>
</header>

Answer 1

for me the issue was that the definition of the ReactLocation was not in the main.tsx. So I fixed it like so:
main.tsx
export const reactLocation = new ReactLocation();
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
App.tsx
import { reactLocation} from './main.tsx';
export const App = () => {
return <Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
}
Hope that helps :)
(I was using vite as build tool)