T
TanStack•2y ago
conscious-sapphire

different layouts between root path and /<some-path> while sharing root

Picture shares my ideal route tree, but children wont match to root path, so I can only accomplish this imperatively in render fn and chose which layout to render based on router state. Hoping to accomplish this with code based routing
No description
2 Replies
vicious-gold
vicious-gold•2y ago
what does "children wont match to root path" mean? what did you try so far, what worked, what did not?
conscious-sapphire
conscious-sapphireOP•2y ago
Solved my own problem creating a reproduction :), will leave it here anyways incase anyone else goes down the same bad path i did 
export const rootRoute = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()();

const leftTreeRoot = createRoute({
  path: "/",
  component: () => (
    <div>
      Im the left tree <Outlet />
    </div>
  ),
  getParentRoute: () => rootRoute,
});

const leftTreeChildOne = createRoute({
  path: "/left-one",
  component: () => <div>Im the first left tree child </div>,
  getParentRoute: () => leftTreeRoot,
});

const leftTreeChildTwo = createRoute({
  path: "/left-two",
  component: () => <div>Im the second left tree child</div>,
  getParentRoute: () => leftTreeRoot,
});

const rightTreeRoot = createRoute({
  path: "/right",
  component: () => (
    <div>
      Im the right tree <Outlet />
    </div>
  ),
  getParentRoute: () => rootRoute,
});

const rightTreeChildOne = createRoute({
  path: "/one",
  component: () => <div>Im the first right tree child </div>,
  getParentRoute: () => rightTreeRoot,
});

const rightTreeChildTwo = createRoute({
  path: "/two",
  component: () => <div>Im the second right tree child</div>,
  getParentRoute: () => rightTreeRoot,
});

export const routeTree = rootRoute.addChildren([
  leftTreeRoot.addChildren([leftTreeChildOne, leftTreeChildTwo]),
  rightTreeRoot.addChildren([rightTreeChildOne, rightTreeChildTwo]),
]);
export const rootRoute = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()();

const leftTreeRoot = createRoute({
  path: "/",
  component: () => (
    <div>
      Im the left tree <Outlet />
    </div>
  ),
  getParentRoute: () => rootRoute,
});

const leftTreeChildOne = createRoute({
  path: "/left-one",
  component: () => <div>Im the first left tree child </div>,
  getParentRoute: () => leftTreeRoot,
});

const leftTreeChildTwo = createRoute({
  path: "/left-two",
  component: () => <div>Im the second left tree child</div>,
  getParentRoute: () => leftTreeRoot,
});

const rightTreeRoot = createRoute({
  path: "/right",
  component: () => (
    <div>
      Im the right tree <Outlet />
    </div>
  ),
  getParentRoute: () => rootRoute,
});

const rightTreeChildOne = createRoute({
  path: "/one",
  component: () => <div>Im the first right tree child </div>,
  getParentRoute: () => rightTreeRoot,
});

const rightTreeChildTwo = createRoute({
  path: "/two",
  component: () => <div>Im the second right tree child</div>,
  getParentRoute: () => rightTreeRoot,
});

export const routeTree = rootRoute.addChildren([
  leftTreeRoot.addChildren([leftTreeChildOne, leftTreeChildTwo]),
  rightTreeRoot.addChildren([rightTreeChildOne, rightTreeChildTwo]),
]);

Did you find this page helpful?