T
TanStack•6mo ago
xenial-black

Redirecting with dynamic slug

How are you supposed to navigate with type safety to a path with dynamic slug? i.e. lets say I have a route /org/$slug/dashboard which checks some state in beforeLoad or loader and decides to redirect to /org/${params.slug}/onboarding. I get type errors doing the following: 
export const Route = createFileRoute('/org/$slug/dashboard')({
  beforeLoad: async () => {
    console.log('beforeLoad');
  },
  loader: async ({ params }) => {
    const [member, organization] = await Promise.all([
      getSelf(),
      getSelfOrganization(),
    ]);

    if (shouldNavigateToOnboarding(member)) {
      redirect({ to: `/org/${params.slug}/onboarding` });
    }

    if (shouldNavigateToPhoneNumberVerification(member)) {
      redirect({ to: `/org/${params.slug}/onboarding/verify-phone` });
    }

    return { member, organization };
  },
  component: RouteComponent,
});
export const Route = createFileRoute('/org/$slug/dashboard')({
  beforeLoad: async () => {
    console.log('beforeLoad');
  },
  loader: async ({ params }) => {
    const [member, organization] = await Promise.all([
      getSelf(),
      getSelfOrganization(),
    ]);

    if (shouldNavigateToOnboarding(member)) {
      redirect({ to: `/org/${params.slug}/onboarding` });
    }

    if (shouldNavigateToPhoneNumberVerification(member)) {
      redirect({ to: `/org/${params.slug}/onboarding/verify-phone` });
    }

    return { member, organization };
  },
  component: RouteComponent,
});
Type '/org/${string}/onboarding' is not assignable to type '"/org/$slug/onboarding"
1 Reply
ambitious-aqua
ambitious-aqua•6mo ago
don't do the string interpolation redirect({ to: '/org/$slug/dashboard', params :{slug:'foo'}})

Did you find this page helpful?