T
TanStack•11mo ago
flat-fuchsia

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>
    <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 />} />
                <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.
1 Reply
adverse-sapphire
adverse-sapphire•11mo ago
one way could be to check in beforeLoad of the root route whether you are on workspaces/$workspaceId (or one of its subroutes). if not, fetch from the server and the redirect I created a small example for this: https://stackblitz.com/edit/tanstack-router-uleyd8?file=src%2Froutes%2F__root.tsx&preset=node
Manuel Schiller
StackBlitz
Router Quickstart File Based Example (forked) - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

Did you find this page helpful?