TanStackT
TanStack•2y ago•
9 replies
uncertain-scarlet

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>

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
Was this page helpful?