TanStackT
TanStack16mo ago
1 reply
instant-harlequin

React router to Tanstack router migration

Hi,
I'm planning to make migration to tanstack router, so I like to get some ideas how to make the migration for the bootstrap part of the app. The app is client only so far, so I have <AppBootstrap> top wrapper thats executes and makes fetching before any route is hit, and set in zustand store workspaceId for the current workspace.

Components structure is like:

    <AppBootstrap>
      <Routes />
    </AppBootstrap>


In terms of React Router, I have this routes, which redirect immediatly to workspaces/:workspaceId:

                <Route path='/' element={<Layout />}>
                    <Route
                        index
                        element={<Navigate to={`workspaces/${workspaceId}`} />}
                    />
                <Route path=':workspaceId' element={<WorkspaceExplorer />} />


In terms of Tanstack router, what is best possible way, to migrate this first step. Where is best place to do the fetching(probably route loaders?) and how and when to do the redirect.
Was this page helpful?