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

/org/$slug/dashboard

which checks some state in beforeLoad or loader and decides to redirect to

/org/${params.slug}/onboarding

/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

/org/${string}/onboarding

' is not assignable to type '"/org/$slug/onboarding"

TanStack•12mo ago•

2 replies

conventional-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

/org/$slug/dashboard

which checks some state in beforeLoad or loader and decides to redirect to

/org/${params.slug}/onboarding

/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

/org/${string}/onboarding

' is not assignable to type '"/org/$slug/onboarding"

Redirecting with dynamic slug

Similar Threads

Redirecting with dynamic slug

Similar Threads

Similar Threads

Similar Threads