TanStack•2w ago•

1 reply

nursing-lime

question about pathless routing and avoiding duplicate components

react

hi everybody! i have a react + vite + tanstack router project with file/directory routing. i've been struggling with a problem where i find that tanstack router treats

(index) route and

/a/b/c

/a/b/c

(splat) routes as entirely separate where upon visiting the splat path, a unique component meant for that exact path is rendered.
the way my application is, i don't really need to treat both cases as independent routes with independent components but instead as a single route and componet (

<Render/>

<Render/>

) wher i can catch the splat (

a/b/c/

a/b/c/

) if one was provided by a user requesting a path or have the splat be

undefined

undefined

within that component.
in either case, i have to only render a single component and i don't want it's local state to reset if a switch between index path (

) and splat path (

a/b/c/

a/b/c/

) occurs (i.e. when the user navigates).
- i've already looked into and tried the splat/catch-all route but sadly it acts as it's own independent unit alongside

which then requires me to render the same component twice and play tricks between both paths. please help!
- i've also loooked into pathless layouts but they do not render for some reason...i would've caught _splat in

<Render/>

<Render/>

at present this is what it looks like (where i was trying the second option),

// $.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/$")({
  component: () => null,
});

// _layout.tsx
import { createFileRoute } from "@tanstack/react-router";
import { Render } from "./-components/Render";
export const Route = createFileRoute("/_layout")({
  component: LayoutComponent,
});
function LayoutComponent() {
  return (
    <Render />
  );
}

// index.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
  component: () => null,
});

// $.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/$")({
  component: () => null,
});

// _layout.tsx
import { createFileRoute } from "@tanstack/react-router";
import { Render } from "./-components/Render";
export const Route = createFileRoute("/_layout")({
  component: LayoutComponent,
});
function LayoutComponent() {
  return (
    <Render />
  );
}

// index.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
  component: () => null,
});

TanStack•2w ago•

1 reply

nursing-lime

question about pathless routing and avoiding duplicate components

react

hi everybody! i have a react + vite + tanstack router project with file/directory routing. i've been struggling with a problem where i find that tanstack router treats

(index) route and

/a/b/c

/a/b/c

<Render/>

<Render/>

) wher i can catch the splat (

a/b/c/

a/b/c/

) if one was provided by a user requesting a path or have the splat be

undefined

undefined

within that component.
in either case, i have to only render a single component and i don't want it's local state to reset if a switch between index path (

) and splat path (

a/b/c/

a/b/c/

) occurs (i.e. when the user navigates).
- i've already looked into and tried the splat/catch-all route but sadly it acts as it's own independent unit alongside

<Render/>

<Render/>

at present this is what it looks like (where i was trying the second option),

// $.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/$")({
  component: () => null,
});

// _layout.tsx
import { createFileRoute } from "@tanstack/react-router";
import { Render } from "./-components/Render";
export const Route = createFileRoute("/_layout")({
  component: LayoutComponent,
});
function LayoutComponent() {
  return (
    <Render />
  );
}

// index.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
  component: () => null,
});

// $.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/$")({
  component: () => null,
});

// _layout.tsx
import { createFileRoute } from "@tanstack/react-router";
import { Render } from "./-components/Render";
export const Route = createFileRoute("/_layout")({
  component: LayoutComponent,
});
function LayoutComponent() {
  return (
    <Render />
  );
}

// index.tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/")({
  component: () => null,
});

question about pathless routing and avoiding duplicate components

Similar Threads

question about pathless routing and avoiding duplicate components

Similar Threads

Similar Threads

Similar Threads