how to use the outlet

I have the following routes, where

settings/index is:

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

export const Route = createFileRoute("/settings/")({
  component: Index,
});

function Index() {
  return (
    <div>
      <div>Tabs</div>
      <Outlet />
    </div>
  );
}

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

export const Route = createFileRoute("/settings/")({
  component: Index,
});

function Index() {
  return (
    <div>
      <div>Tabs</div>
      <Outlet />
    </div>
  );
}

and settings/subscriptions is:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/settings/subscription')({
  component: () => <div>Subscribption</div>
})

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/settings/subscription')({
  component: () => <div>Subscribption</div>
})

when I visit settings/subscription I just see

Subscribption

Subscribption

and not

Tabs

Tabs

, am I using it in the wrong way? Basically I want a page with some tabs and the different sub routs to be the tabs

TanStack•2y ago•

8 replies

sad-indigo

how to use the outlet

I have the following routes, where

settings/index is:

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

export const Route = createFileRoute("/settings/")({
  component: Index,
});

function Index() {
  return (
    <div>
      <div>Tabs</div>
      <Outlet />
    </div>
  );
}

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

export const Route = createFileRoute("/settings/")({
  component: Index,
});

function Index() {
  return (
    <div>
      <div>Tabs</div>
      <Outlet />
    </div>
  );
}

and settings/subscriptions is:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/settings/subscription')({
  component: () => <div>Subscribption</div>
})

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/settings/subscription')({
  component: () => <div>Subscribption</div>
})

when I visit settings/subscription I just see

Subscribption

Subscribption

and not

Tabs

Tabs

, am I using it in the wrong way? Basically I want a page with some tabs and the different sub routs to be the tabs

how to use the outlet

Similar Threads

how to use the outlet

Similar Threads

Similar Threads

Similar Threads