ratty-blush

Auto-redirect

similar to this other question, i want to auto redirect to a child route on nav -- i.e. when navigating to settings i want to redirect to settings/organizations -- i tried the below along with several iterations and none can properly redirect (the nav routes work as expected)

import {
  Link,
  createFileRoute,
  linkOptions,
  redirect,
} from "@tanstack/react-router";

export const Route = createFileRoute("/settings")({
  component: RouteComponent,
  loader: () => {
    throw redirect({ to: "/settings/organizations", replace: true });
  },
});

const options = [
  linkOptions({
    to: "/settings/organizations",
    label: "Organizations",
  }),
  linkOptions({
    to: "/settings/panels",
    label: "Panels",
  }),
];

function RouteComponent() {
  return (
    <>
      <div className="py-10">
        <div className="flex flex-wrap divide-x">
          {options.map((option) => {
            return (
              <Link
                key={option.to}
                {...option}
                activeProps={{ className: `font-bold` }}
                className="p-2"
              >
                {option.label}
              </Link>
            );
          })}
        </div>
      </div>
    </>
  );
}

import {
  Link,
  createFileRoute,
  linkOptions,
  redirect,
} from "@tanstack/react-router";

export const Route = createFileRoute("/settings")({
  component: RouteComponent,
  loader: () => {
    throw redirect({ to: "/settings/organizations", replace: true });
  },
});

const options = [
  linkOptions({
    to: "/settings/organizations",
    label: "Organizations",
  }),
  linkOptions({
    to: "/settings/panels",
    label: "Panels",
  }),
];

function RouteComponent() {
  return (
    <>
      <div className="py-10">
        <div className="flex flex-wrap divide-x">
          {options.map((option) => {
            return (
              <Link
                key={option.to}
                {...option}
                activeProps={{ className: `font-bold` }}
                className="p-2"
              >
                {option.label}
              </Link>
            );
          })}
        </div>
      </div>
    </>
  );
}

6 Replies

ratty-blushOP•10mo ago

fwiw if someone else comes here, the below is a workaround but i'd love to figure out how the built in setup is uspposed to be

function useRedirectToOrganizationsTab() {
  const routerState = useRouterState();
  const navigate = useNavigate();

  useEffect(() => {
    if (routerState.location.pathname === "/settings") {
      navigate({ to: "/settings/organizations" });
    }
  }, [navigate, routerState.location.pathname]);
}

function useRedirectToOrganizationsTab() {
  const routerState = useRouterState();
  const navigate = useNavigate();

  useEffect(() => {
    if (routerState.location.pathname === "/settings") {
      navigate({ to: "/settings/organizations" });
    }
  }, [navigate, routerState.location.pathname]);
}

huh, i just tried my original example again and it seems to do the redirect in the url but it totally freezes the browser and doesn't functionally work

other-emerald•10mo ago

Here's the same solution using a beforeLoad. You need to check the location on entry for the pathname being "/settings" because if you don't essentially every route will encounter the redirect and cause it to get into an infinite redirect situation. https://stackblitz.com/edit/tanstack-router-dumsifrg?file=src%2Froutes%2Fsettings.tsx

Eric Chernuka

StackBlitz

TSR Settings redirect - StackBlitz

Run official live example code for Router Kitchen Sink File Based, created by Tanstack on StackBlitz

sunny-green•10mo ago

is there any reason you can't use navigate inside

RouteComponent

RouteComponent

function RouteComponent() {
  const navigate = useNavigate();

  // use a flag  or completely remove replace the code in here and return navigate
  if (env.redirectSettings) {
    return navigate({ to: '/settings/organizations' });
  }

  return (
    <>
      <div className='py-10'>
        <div className='flex flex-wrap divide-x'>
          {options.map((option) => {
            return (
              <Link
                key={option.to}
                {...option}
                activeProps={{ className: `font-bold` }}
                className='p-2'
              >
                {option.label}
              </Link>
            );
          })}
        </div>
      </div>
    </>
  );
}

function RouteComponent() {
  const navigate = useNavigate();

  // use a flag  or completely remove replace the code in here and return navigate
  if (env.redirectSettings) {
    return navigate({ to: '/settings/organizations' });
  }

  return (
    <>
      <div className='py-10'>
        <div className='flex flex-wrap divide-x'>
          {options.map((option) => {
            return (
              <Link
                key={option.to}
                {...option}
                activeProps={{ className: `font-bold` }}
                className='p-2'
              >
                {option.label}
              </Link>
            );
          })}
        </div>
      </div>
    </>
  );
}

ratty-blushOP•10mo ago

That’s essentially what the hook does @Jay Thanks @Eric Chernuka I missed your message before but sounds like a winner and I will give this a try!

other-emerald•10mo ago

If you wanted to do it in the component just do an early return of <Navigate />

ratty-blushOP•9mo ago

for reference in case that stack blitz dies:

import {
  createFileRoute,
  Link,
  Outlet,
  redirect,
} from '@tanstack/react-router';

export const Route = createFileRoute('/settings')({
  beforeLoad({ location }) {
    if (location.pathname === '/settings') {
      throw redirect({
        replace: true,
        to: '/settings/organization',
      });
    }
  },
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <div>
      <nav className="space-x-2">
        <Link to="/settings/organization" className="underline">
          Organizations Settings
        </Link>
        <Link to="/settings/plans" className="underline">
          Plan Settings
        </Link>
      </nav>
      <Outlet />
    </div>
  );
}

import {
  createFileRoute,
  Link,
  Outlet,
  redirect,
} from '@tanstack/react-router';

export const Route = createFileRoute('/settings')({
  beforeLoad({ location }) {
    if (location.pathname === '/settings') {
      throw redirect({
        replace: true,
        to: '/settings/organization',
      });
    }
  },
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <div>
      <nav className="space-x-2">
        <Link to="/settings/organization" className="underline">
          Organizations Settings
        </Link>
        <Link to="/settings/plans" className="underline">
          Plan Settings
        </Link>
      </nav>
      <Outlet />
    </div>
  );
}

Gaming

Programming

Auto-redirect

Did you find this page helpful?