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

getParentRoute

entityCreate

entityCreate

() => root

() => root

the component renders correctly (but I have to set the path to

entity/create

entity/create

then)

TanStack•3y ago•

3 replies

faint-white

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

getParentRoute

entityCreate

entityCreate

() => root

() => root

the component renders correctly (but I have to set the path to

entity/create

entity/create

then)

Child route not rendering

Similar Threads

Child route not rendering

Similar Threads

Similar Threads

Similar Threads