Better way to render redirected matched component

[igortas]

Hi,

I've asked previously question in Q&A section, which currently is not answered.
I'm trying to migrate some routes from react-router, which were done as index routes.
Finally I've managed to solve them, but I don't like how the implementation is:

In my case going from route to the redirected route, I need to use Navigate and MatchRoute components to redirect to some other route and also to able to render the component:

Snippet:

              <>
                <Navigate
                  to='redirected-route'
                />
                <MatchRoute
                  to='redirected-route'
                  pending
                >
                  {() => (
                        <RedirectedComponent />
                  )}
                </MatchRoute>
              </>

Is there a way with file routes, to render redirected components, like in react-router?

[schiller-manuel]

what are "redirected components"?
please provide a minimal complete example by forking one of the existing examples on stackblitz

[igortas]

@schiller-manuel
This is the minimal repo (please update it in a way from _root.tsx immediatly I can redirect to /workspaces/$workspaceId and also render all 3 components(root, workspaces and workspaceId):

https://stackblitz.com/edit/tanstack-router-epyihq?file=src%2Froutes%2F__root.tsx,src%2Froutes%2Fworkspaces%2Findex.tsx,src%2Froutes%2Fworkspaces%2F%24workspaceId.tsx&preset=node

@schiller-manuel maybe the name is misleading, but I like to migrate from react-router to tanstack-router.

I like to convert this react-router routes:

// react router executes, route path, workspaces path and renders the index route by default
<Route path='/' element={<>/</>}>
        <Route path='workspaces' element={<>workspaces</>}>
            <Route
             index
              path=':workspaceId'
              element={<>workspaceId index route</>}
            />
        </Route>
</Route>

To tanstack-router file based routes like:

__root.tsx

export const Route = createRootRoute({
  component: () => <Outlet />
});

workspaces/index.lazy.tsx

export const Route = createLazyFileRoute('/workspaces/')({
  component: () => (
    <SomeLayout>
     <Outlet />
    </SomeLayout>
  )
});

workspaces/$workspacesId.lazy.tsx

export const Route = createLazyFileRoute('/workspaces/$workspaceId/')({
  component: () => (
        <WorkspaceIdComponent />
  )
});

I can't figure it a way in tanstack-router to tell the router navigate by default to /workspaces/$workspaceId and u need to render all 3 routes: route, workspaces and $workspaceId route.

The only way I figure it till now is someway of workaround, with conditional inside the __root.tsx:

            {workspaceId && location.pathname === '/' ? (
              <>
                <Navigate
                  to='/workspaces/$workspaceId'
                  params={{ workspaceId }}
                />
                <MatchRoute
                  to='/workspaces/$workspaceId'
                  params={{ workspaceId }}
                  pending
                >
                  {() => (
                        <WorkspaceIdComponent />
                  )}
                </MatchRoute>
              </>
            ) : (
              <Outlet />
            )}