TanStackT
TanStack•14mo ago•
7 replies
ill-bronze

Auto-redirect

similar to Auto-redirect when accessing a route, 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>
    </>
  );
}
Was this page helpful?