T
TanStack•16mo ago
separate-emerald

Code based routing help

Hi all, struggling to understand the routing concepts a little bit. partly bc it is 4am. My aim is to have /games be the "create game" page, and /games/$slug be the "playing game" page. there are other routes like /games/$slug/results also. Is it correct to have THIS rootRoute here? Or should the game's route parent be different? (and also the results page etc)
No description
2 Replies
conventional-tan
conventional-tan•16mo ago
Its honeslty sort of up to you. You approach will be totally fine, especially if theres absolutely no shared stuff happening between the pages. If shared data-loading needs to happen however, I'd probably have it like this. And do the shared stuff in the gameRoute. 
const rootRoute = createRootRouteWithContext()({ ... })

const gameRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/games'
  component: () => <Oulet />
})

const gameIndexRoute = createRoute({
  getParentRoute: () => gameRoute,
  path: '/'
  component: NewGamePage
})

const gameIndexRoute = createRoute({
  getParentRoute: () => gameRoute,
  path: '$slug'
  component: GameSlugPage
})
const rootRoute = createRootRouteWithContext()({ ... })

const gameRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/games'
  component: () => <Oulet />
})

const gameIndexRoute = createRoute({
  getParentRoute: () => gameRoute,
  path: '/'
  component: NewGamePage
})

const gameIndexRoute = createRoute({
  getParentRoute: () => gameRoute,
  path: '$slug'
  component: GameSlugPage
})
separate-emerald
separate-emeraldOP•16mo ago
Makes sense yep, thank yo

Did you find this page helpful?