React Location Router doesn't work after changing state in 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>

score 0 · Answer 1 · answered Sep 17 '22 at 09:02

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)

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

1 Answers1