T
TanStack•3y ago
quickest-silver

Child route not rendering

const Root = () => (
  <Suspense>
    <App />
  </Suspense>
);

const root = new RootRoute({component: Root});
const index = new Route({
  getParentRoute: () => root,
  path: '/',
  component: Index,
});
const entity = new Route({
  getParentRoute: () => root,
  path: 'entity',
  component: Entity,
});
const entityCreate = new Route({
  getParentRoute: () => entity, // Why putting entity here does not work?
  path: 'create',
  component: EntityCreate,
});

export const paths = {
  index: index,
  entity: entity,
  entityCreate: entityCreate,
}

export const routeTree
  = root.addChildren([index, entity.addChildren([entityCreate])]);
const Root = () => (
  <Suspense>
    <App />
  </Suspense>
);

const root = new RootRoute({component: Root});
const index = new Route({
  getParentRoute: () => root,
  path: '/',
  component: Index,
});
const entity = new Route({
  getParentRoute: () => root,
  path: 'entity',
  component: Entity,
});
const entityCreate = new Route({
  getParentRoute: () => entity, // Why putting entity here does not work?
  path: 'create',
  component: EntityCreate,
});

export const paths = {
  index: index,
  entity: entity,
  entityCreate: entityCreate,
}

export const routeTree
  = root.addChildren([index, entity.addChildren([entityCreate])]);
why doesn't this work? If I change the getParentRoute of entityCreate to () => root the component renders correctly (but I have to set the path to entity/create then)
2 Replies
flat-fuchsia
flat-fuchsia•3y ago
@Cris make sure you have an <Outlet /> component in Entity if you aren't wanting to combine the UI of Entity and EntityCreate then you will want to do something like this 
const entity = new Route({
  getParentRoute: () => root,
  path: 'entity',
});
const entityIndex = new Route({
  getParentRoute: () => entity,
  path: '/',
  component: Entity,
});
const entityCreate = new Route({
  getParentRoute: () => entity, 
  path: 'create',
  component: EntityCreate,
});
const entity = new Route({
  getParentRoute: () => root,
  path: 'entity',
});
const entityIndex = new Route({
  getParentRoute: () => entity,
  path: '/',
  component: Entity,
});
const entityCreate = new Route({
  getParentRoute: () => entity, 
  path: 'create',
  component: EntityCreate,
});
quickest-silver
quickest-silverOP•3y ago
Hi @Bryant thanks a lot for your reply, that worked.

Did you find this page helpful?