T
TanStack•15mo ago
rare-sapphire

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 and not 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
No description
4 Replies
foreign-sapphire
foreign-sapphire•15mo ago
outlet must be put into either routes/settings.tsx or routes/settings/route.tsx outlet only renders child matches but index and subscription are siblings
rare-sapphire
rare-sapphireOP•15mo ago
oh thanks, I renamed index.tsx to route.tsx, the only problem I'm getting is that now I get this ts error: 
Argument of type '"/settings"' is not assignable to parameter of type 'keyof FileRoutesByPath'.ts(2345)
Argument of type '"/settings"' is not assignable to parameter of type 'keyof FileRoutesByPath'.ts(2345)
replacing it with /settings/ works fine but it get changed back to /settings on save
rare-sapphire
rare-sapphireOP•15mo ago
No description
rare-sapphire
rare-sapphireOP•15mo ago
nevermind solved thanks!

Did you find this page helpful?