T
TanStack•7mo ago
deep-jade

Maximum update depth exceeded when redirecting

Hello I have this setup and every time I navigate to /profile I get the error even though the app doesnt crush and there's no problem I just wonder what's the correct way to achieve that redirect 
export const profileRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/profile/$username",
  component: Profile,
});

export const ownProfileRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/profile",
  component: OwnProfile,
});

function OwnProfile() {
  const { username } = useUserState();
  const { search } = useLocation();

  return (
    <Navigate
      to="/profile/$username"
      params={{ username }}
      search={search}
      replace
    />
  );
}
export const profileRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/profile/$username",
  component: Profile,
});

export const ownProfileRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/profile",
  component: OwnProfile,
});

function OwnProfile() {
  const { username } = useUserState();
  const { search } = useLocation();

  return (
    <Navigate
      to="/profile/$username"
      params={{ username }}
      search={search}
      replace
    />
  );
}
1 Reply
like-gold
like-gold•7mo ago
Instead of using a component that needs to wait for the render to happen, consider using the beforeLoad callback to throw a redirect. Something like this - https://github.com/SeanCassiere/nv-rental-clone/blob/b9bfe8efb61d27f223803c92d7bac6c5a9f44802/src/routes/_auth/(settings)/settings._index.tsx#L5 Then it's just a matter of injects your username into router.
GitHub
nv-rental-clone/src/routes/_auth/(settings)/settings._index.tsx at ...
Navotar with Tailwind and Tanstack Router and Query - SeanCassiere/nv-rental-clone

Did you find this page helpful?