T
TanStack•14mo ago
deep-jade

Handling nested routes (migrating from react-router dom)

There is a way to describe nested routes in a component without importing them into the router.tsx (code-based way) here is tsx return 
<ContextProvider>
  <Routes>    
    <Route element={<OnboardingStart />} path='start' />
    <Route      
    element={
        <OnboardingPayroll          
        isLoading={submitResult.isLoading}
          onNavigateBack={() =>            
            navigate(`${routes.Onboarding}/start`)
          }          
          onNavigateForward={handleSubmit}
          saveButtonText='Finish Onboarding'        
          />
      }
      path={`${PAYROLL_PAGES.path}/*`}    />
  </Routes>
</ContextProvider>
<ContextProvider>
  <Routes>    
    <Route element={<OnboardingStart />} path='start' />
    <Route      
    element={
        <OnboardingPayroll          
        isLoading={submitResult.isLoading}
          onNavigateBack={() =>            
            navigate(`${routes.Onboarding}/start`)
          }          
          onNavigateForward={handleSubmit}
          saveButtonText='Finish Onboarding'        
          />
      }
      path={`${PAYROLL_PAGES.path}/*`}    />
  </Routes>
</ContextProvider>
that is, the route declared in the router.tsx also has internal routers that have props based on the logic of the component, how to declare them correctly? It is also possible that nested routes may also have a similar structure
5 Replies
correct-apricot
correct-apricot•14mo ago
Have you looked at the code-based examples? You don't need to import the router into your router. In fact, its the opposite, since all your routes need to be created in a route-tree to be used in the created router. You can only have a single router instance.
deep-jade
deep-jadeOP•14mo ago
Of course, I understand this logic, I just don’t fully understand how I can create routes for a tree if the components contain any props calculated in the parent route
correct-apricot
correct-apricot•14mo ago
Components do not receive any props. The parent set up is like this. 
import { createRootRoute, createRoute, Outlet } from '@tanstack/react-router'

const rootRoute = createRootRoute({
  component: () => <Outlet />
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => "Home"
})

const postsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: 'posts',
  component: () => (
    <div>
    Posts header
    <Outlet />
    </div>
  )
})

const postsIndexRoute = createRoute({
  getParentRoute: () => postsRoute,
  path: '/',
  component: () => "Posts Index"
})

const postsPostIdRoute = createRoute({
  getParentRoute: () => postsRoute,
  path: '$postId',
  component: () => "Posts ID"
})

const routeTree = rootRoute.addChildren([
  postsRoute.addChildren([
    postsPostIdRoute,
    postsIndexRoute
  ]),
  indexRoute
])
import { createRootRoute, createRoute, Outlet } from '@tanstack/react-router'

const rootRoute = createRootRoute({
  component: () => <Outlet />
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => "Home"
})

const postsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: 'posts',
  component: () => (
    <div>
    Posts header
    <Outlet />
    </div>
  )
})

const postsIndexRoute = createRoute({
  getParentRoute: () => postsRoute,
  path: '/',
  component: () => "Posts Index"
})

const postsPostIdRoute = createRoute({
  getParentRoute: () => postsRoute,
  path: '$postId',
  component: () => "Posts ID"
})

const routeTree = rootRoute.addChildren([
  postsRoute.addChildren([
    postsPostIdRoute,
    postsIndexRoute
  ]),
  indexRoute
])
deep-jade
deep-jadeOP•14mo ago
Yep u created this tree and this work fine for me but one of package of my app contain this complecated logic, when some high lvl routes contain child routes (we migrated from react-router-dom) and it was created for minimizing duplicated code if i understand correctly now i need deprecate this logic and create full route tree on router file
correct-apricot
correct-apricot•14mo ago
Most likely yes.

Did you find this page helpful?