Modular protected routes with beforeLoad (HOF approach)
react
I’m have a React app which I am migrating from React Router to TanStack Router and want a modular way to define authenticated/protected routes.
From the docs I see two main options:
1. Wrapper component – e.g. <ProtectedRoute><Outlet /></ProtectedRoute>
2.
I prefer (2) so navigation is guarded before the route loads, but I didn’t want to copy-paste the same beforeLoad logic on every protected route. So I tried a HOF that wraps the route definition and injects the guard:
https://gist.github.com/CKanishka/a0a4cb6dce51f413d74d58750140fa31
Questions:
1. Is this approach something you’d recommend?
2. Any pitfalls with injecting beforeLoad via a HOF that I should watch for (e.g. with code-splitting, search params, or type inference)?
Thanks in advance.
From the docs I see two main options:
1. Wrapper component – e.g. <ProtectedRoute><Outlet /></ProtectedRoute>
2.
beforeLoadI prefer (2) so navigation is guarded before the route loads, but I didn’t want to copy-paste the same beforeLoad logic on every protected route. So I tried a HOF that wraps the route definition and injects the guard:
// Usage: wrap createFileRoute with protectRoute
export const Route = protectRoute(createFileRoute("/_main/discover"))({
component: DiscoverPage,
});https://gist.github.com/CKanishka/a0a4cb6dce51f413d74d58750140fa31
Questions:
1. Is this approach something you’d recommend?
2. Any pitfalls with injecting beforeLoad via a HOF that I should watch for (e.g. with code-splitting, search params, or type inference)?
Thanks in advance.
