react-query-questions
solid-query-questions
table-questions
virtual-questions
router-questions
react-charts-questions
ranger-questions
vue-query-questions
svelte-query-questions
bling-questions
form-questions
angular-query-questions
start-questions
db-questions
start-showcase
router-showcase
📣-announcements
How to do authenticated routes in `start` like this example?
https://github.dev/tanstack/router/tree/main/examples/react/authenticated-routes
```jsx
function InnerApp() {
const auth = useAuth()...
Sync loader always causes pending component to show?
Our loader does preloading of an apollo query which is separately fetched in the component using
useQuery() (so we get reactive data but also start fetching the data as soon as possible).
We handle loading state of the actual route using skeletons, so we want to get it mounted as soon as possible. We observe that merely having the loader(): void defined always causes the throbber to load, even though we return no value and the loader is not async.
```tsx...Flat routes don't work in TanStack Start?
In TanStack start, if I use flat routes using the dot operator, it doesn't appear to work as intended?
This does however work if I nest it in a folder with an index file like I would in NextJS. Are there any caveats I'm missing here to get this to work correctly in TanStack Start?...
How do I assert types for route params?
when I declare a new file route, such as:
createFileRoute("/listening/top/$entity")
is it possible to assert or assign a type to $entity? in my case I'd like for it to be an enum with artists, tracks, albums but I can't figure out how to extend it beyond a string...Type-safety for list of params in custom component
I have a reusable sidebar component that takes in a list of items that each link somewhere. How should I type the props to allow type-safety for the list? I currently have this:
```typescript
export interface SidebarNavProps<P extends RoutePaths<RegisteredRouter['routeTree']>> {
from: P,...
Search params start and end date validation
Hi there, im implementing search params for filters and i want to make sure the start date is before the end date. in zod i can do something like this
```ts
export const FiltersRequest = object({
startDate: fallback(string().date(), '').default(''),
endDate: fallback(string().date(), '').default(''),...
External Providers
I'm sorry for the dumb question, but what is the best place to include external providers on @tanstack/start project?
I'm trying to use MantineUI, Clerk and Convex. All of them requires a provider around the app. I face a lot of errors with hydrateRoot, independent of the place that I use. Someone have a recomendation?...
createLink causes weird behavior with component?
I've built a table row that I have also wrapped up in a
createLink. Felt like a great idea at first to help me distribute the type safety of the router on a component that I'd like to link to another page. But it causes this weird behavior with the styles.
How do I stop it from doing that?
```tsx...Navigation state?
For example is there a hook to detect when a page is loading. This would be useful for showing a page loading bar etc.
Is it possible to have a route with __ in the path?
I need to handle requests to ${baseroute}/__/auth/handler. I'm using the file based routing approach and createFileRoute. I haven't found a way to create a file that doesn't fail due to the leading underscore being trimmed.
I included more details in the SO post:
https://stackoverflow.com/questions/79093101/when-using-tanstack-routers-file-based-routing-and-createfileroute-how-can-i-g...
Using virtual routes to load routes from an external package
I do not see why this would not work (I will test later), but, can we do something like
```ts
const virtualRouteConfig = rootRoute('root.tsx', [
physical('/node_modules/my-package/routes/', '/namespace'),
physical('/', '/'),...
Understanding beforeLoad
Hello,
Yesterday, while playing with firebase auth and tanstack router, I ran into a problem with beforeLoad.
On an _authenticated layout I tried to reassign my auth value after it was verified so that the
Route.useRouteContext() is typed with { auth: User } and not { auth: User | null }.
Then I asked about it and Manuel Schiller help me to find out the problem. But then I wanted to understand how it works better so I cloned the router repository and read how the beforeLoad works here: https://github.com/TanStack/router/blob/d9a97e2693a726342ed8e9bda6af190902f34077/packages/react-router/src/router.ts#L2168. And I saw that before launching beforeLoad the context seems to add prev.__beforeLoadContext so I thought it's the previous beforeLoadContext value of the route match...are intercepting routes possible like in nextjs?
saw the nextjs implementation of showing a modal when you click on the link to certain routes but showing the whole page if refreshed and was wondering if there's something like that in router?
Search mask lagging behind by an update
the new search middleware sounds nice! Just wondering if you anyone has been able to look into search params lagging when using declarative masking?
https://codesandbox.io/p/devbox/stoic-cerf-qj7jyh
...
Question regarding nested layouts
within my app i am trying to achieve a nested routing structure (for including navigation/ect for protected routes) for that i am trying to get the Directory Routes approach to apply the wrapper that /secure/index.tsx introduces around all subsequent routes (/secure/profile/index.tsx, ect)
i have probably overseen a small piece of documentation but can someone point out my mistake?
this is my routing structure...
data loader only on first render
I have an overview of posts with pagination and filters and i want to make use of the function that preloads the first render with posts when you hover the link so i implemented this
```ts
export const Route = createFileRoute('/_app/posts/')({
validateSearch: zodSearchValidator(PostsRequest),...
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:
...
implementing the breadcrumbs example in docs to a typescript project
In the docs there is an example to add breadcrumbs to your layout.
https://tanstack.com/router/latest/docs/framework/react/guide/router-context#processing-accumulated-route-context
```ts
export const Route = createRootRoute({
component: () => {...
Route implicitely has type 'any' because of loader
I have the following code:
```export const Route = createFileRoute(
"/_layout/_adminPermission/admin/committees/$slug",
)({
loader: ({ context: { queryClient, auth }, params: { slug } }) =>...