stormy-gold

Default children route

I have a root to edit my office /offices/$id/edit This root as 3 children roots:

const routeTree = RootRoute.addChildren([
  // ...
  // '/offices/$id/edit'
  OfficeEditRoute.addChildren([ 
    OfficeEditDescriptionRoute, // '/'
    OfficeEditFeaturesRoute, // '/features'
    OfficeEditImagesRoute, // '/images'
  ]),
  // ...
]);

const routeTree = RootRoute.addChildren([
  // ...
  // '/offices/$id/edit'
  OfficeEditRoute.addChildren([ 
    OfficeEditDescriptionRoute, // '/'
    OfficeEditFeaturesRoute, // '/features'
    OfficeEditImagesRoute, // '/images'
  ]),
  // ...
]);

The goal is to show the right form depending of the route (this children are rendered in an <Outlet />). How do I make it so that the OfficeEditDescriptionRoute is the default children route, so that when the user is on /offices/$id/edit, the Description Route is shown. The other route would be shown based on the path (with the use of navigation). Thanks

5 Replies

firm-tan•2y ago

code based or file based routing? ideally provide a minimal complete example by forking one of the existing examples on stackblitz

stormy-goldOP•2y ago

I use the code based method. Every child component is using this format:

const Component = () => {
  return (
    <div>
      Test
    </div>
  );
};

export const OfficeEditImagesRoute = createRoute({
  getParentRoute: () => OfficeEditRoute,
  component: Component,
  path: '/offices/$id/edit/images', // with /images changing depending on the children
});

const Component = () => {
  return (
    <div>
      Test
    </div>
  );
};

export const OfficeEditImagesRoute = createRoute({
  getParentRoute: () => OfficeEditRoute,
  component: Component,
  path: '/offices/$id/edit/images', // with /images changing depending on the children
});

The parent root is :

const Component = () => {
  return (
    <div>
      <h1>Header</h1>
      <div>
        <Outlet />
      </div>
    </div>
  );
};

export const OfficeEditRoute = createRoute({
  getParentRoute: () => BaseRoute,
  component: Component,
});

const Component = () => {
  return (
    <div>
      <h1>Header</h1>
      <div>
        <Outlet />
      </div>
    </div>
  );
};

export const OfficeEditRoute = createRoute({
  getParentRoute: () => BaseRoute,
  component: Component,
});

Not sure how StackBlitz works sorry

firm-tan•2y ago

https://stackblitz.com/github/tanstack/router/tree/main/examples/react/basic?embed=1&theme=dark

StackBlitz

Router Basic Example - StackBlitz

Run official live example code for Router Basic, created by Tanstack on StackBlitz

firm-tan•2y ago

click on fork and apply your changes then paste the link here isn't it enough to define the description route as the index route ?

export const OfficeEditDescriptionRoute = createRoute({
  getParentRoute: () => OfficeEditRoute,
  component: Component,
  path: '/offices/$id/edit/',
});

export const OfficeEditDescriptionRoute = createRoute({
  getParentRoute: () => OfficeEditRoute,
  component: Component,
  path: '/offices/$id/edit/',
});

stormy-goldOP•2y ago

@Manuel Schiller Hi, Yes it does indeed, I wanted to have the path as /description and also be the index if the path is the same as the parent, but I settled for only be the index route. Thanks !

Gaming

Programming

Default children route

Did you find this page helpful?