How to perform redirects from the root loader?

[rockchalkwushock]

Hello all first time user of @tanstack/location and I'm having a bit of a disconnect in understanding what I am calling the root loader (top-level loader in the routes array). I am using @tanstack/react-query as well and would like to utilize this root loader for:

1. Verifying the user access credentials are present and if not redirecting them back to the login page (not part of the react app).
2. Querying the initial data needed to paint the UI that will be necessary for the rest of the lifecycle of the user's session.

I understand that I can use useMatch to get reference to the data from the root loader in all the children routes. What I am not quite clear on is how to perform a redirect either out of the application if the user credentials are not present or how to redirect them through to another route.

Example

root path: "/"
root loader: no credentials
redirect to django app login page

root path: "/"
root loader: credentials present, initial query runs
redirect to `/profiles/{id}/dashboard`

Thanks for any pointers on how to handle this! Really liking this package already 🎉

[danicase]

For future reference, this is how I would solve it:

const protectedRoutes = new Route({
  getParentRoute: () => rootRoute,
  loader: async () => AuthService().catch(() => {
      throw new Error('Unauthorized');
    }),
  id: 'protectedRoutes',
  component: () => <Navigate to="/profiles/{id}/dashboard" params={{id:"myId"}} />
  ),
  errorComponent: () => <Navigate to="/login"  />;
  },
});

Based on that, the loader will determine if it's authenticated and will load the redirection inside your app or the error component that will redirect to the login.

A more amicable solution would be to do it inside the loader, as the documentation suggest (example below), but there is currently a circular dependency that needs to be resolved. The documentation does not give an example on how to do it so this is my best guess

const protectedRoutes = new Route({
  getParentRoute: () => rootRoute,
  id: 'protectedRoutes',
  loader: async () => AuthService()
    .then(() => { router.navigate({to:'/profiles/{id}/dashboard', params={id:"myId'}) })
    .catch(() => { router.navigate({to:'/login') }),
});

[igortas]

I need a way to immediately force redirect(no auth), from / to /workspaces/$workspaceId, but nothing really I can found.
workspaces is layout or index route, which have outlet, that needs to inject the content from /workspaces/$workspacesId only when user navigates to / route, or this is the index route in react-router. Currently looks like is not that easy to migrate from react-router to tanstack-router.

[IlliaHreben]

Works to me:

const indexRoute = createRoute({
  getParentRoute: () => mainRoute,
  path: '/',
  component: () => <Navigate to={workspaceRoute.to} params />,
});

mainRoute.addChildren([
  indexRoute,
  ...otherChildren
])

You can use it on every route which has some container layout which has an Outlet inside, but you wanna redirect it on the child route

[igortas]

@IlliaHreben redirect is one thing, telling to execute the components inside those files routes is something different.
Below this snippet is from react-router docs, which knows how to execute, root route, teams route and than the index route.

<Route path="/teams" element={<Teams />}>
  <Route index element={<TeamsIndex />} />
  <Route path=":teamId" element={<Team />} />
</Route>

https://reactrouter.com/en/main/route/route#index

In tanstack there is no way of doing this, the only way I've found is the <MatchRoute /> which needs to exists in the root route, but also with conditional like so:

{
  location.pathname === '/' ? <MatchRoute /> : <Outlet />
}

There is no ahead of time configuration, when users only hit the / to redirect them to workspaces/:workspaceId route

[JesseHGerard]

I have an OK workaround for the circular dependency issue. I'm open to suggestions on a better pattern.

Create a new file with an object to store a reference to the navigate function.

// navigate.ts
import type { router } from './main' // The circularity isn't a problem because it's just a type

/** Navigate imperatively.
 * Cannot be used before router has been created (avoid using during app initialization/bootstrap phase). */
export const navigate = {
  /* HACK: avoids circular dependency */
  current: (() => {
    throw Error('`navigate.current` was called before router was created')
  }) as unknown as (typeof router)['navigate'],
}

Set a reference to navigate after the router is created.

// main.js
import { navigate } from './navigate'
// ...

export const router = createRouter({
  routeTree,
})

navigate.current = router.navigate // set the navigate function here

Use navigate.current({ to: '/' }) to navigate imperatively outside a component, such as in a loader.