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
Would there be interest for adding `sherif` to the tanstack/router monorepo?
It's a high quality, fast tool for ensuring consistency across all the dependencies of a monorepo.
https://github.com/QuiiBz/sherif
It's as simple as
pnpx sherif. No config, no install, doesn't even need node_modules....How can i display a loading component for a page?
I notice that when i enter a nested url of my app in the browser tab and i go to it, it takes very long time to load the page (because of prefetch etc...).
Is it possible to show some short of loading component?
(example: nextjs has this loading.tsx) - do Tanstack router have something equalivaten?...
Tanstack Router and Clerk
I have a React SPA web application with Tanstack Router (file-based routing) and I want to protect the whole app - except the login route I guess - using Clerk (I will later also protect my Hono backend's endpoints but that's for later). Considering Clerk is a partner of Tanstack, I was hoping I could find some "official" examples on how to do this properly, but unfortunately the only resources I could find were for Tanstack Start, and a few old repos with completely different approaches.
I would really appreciate if anyone could explain or show me how to do it properly once and for all, so I can use it in all my apps, knowing it most likely follows best practices, is secure, doesn't slow down my app unnecessarily (big concern), etc.
Thank you 🙂...
unmet peer dep issue w/ tanstack/router-cli
There is a minor issue when installing (at least w/
pnpm)
```
├─┬ @tanstack/router-cli 1.120.18
│ └─┬ @tanstack/router-generator 1.120.20
│ └── ✕ unmet peer @tanstack/react-router@^1.120.20: found 1.120.18...Url as /posts/1/comments but folder structure as /posts/comments
Hi,
I came across this route structure in the TanStack Router documentation:
https://tanstack.com/router/latest/docs/framework/react/routing/virtual-file-routes
...
Autocomplete and url typing not working
Hey guys, I installed Tanstack router and made several routes.
It works well, except that when I use
<Link> or useNavigate(), I don't have url autocomplete and type validation.
I'm using react-vite, and the plugin is enabled in first in my vite.config.ts file.
...How can I make my URLs readable instead of URL-encoded JSON?
How can I make my URLs readable instead of URL-encoded JSON?
Currently getting:
?filters=%7B"status"%3A"active"%2C"category"%3A"api"%7D
...
Split screen routes
What is the preffered way to create an overview screen of lets say 'events' and a detail screen for said event that shows on the right of the overview
when on route
/events i want the whole page to show a list of the events.
But navigating to an events goes to events/$eventId but is shown next to the overview.
what i did now is this folder structure
```...Context and loader data serialization
Hi all, I encountered an issue when trying to put a Set into loader data. It looks like TSR was trying to serialize and deserialize on page reload or something. Is there anything I can use to control how this works? I searched the docs and couldn’t find anything. And does it also apply to context, or other data stored in TSR?
Inline styles
I'm building a whitelabel multi-tenant app that gets the tenant colors from an api before render. I found this hacky solution to inject the theme directly on the head of my root component like this:
```tsx
function RootComponent() {
const { authState } = Route.useLoaderData() const theme = getTheme(authState) ...
const { authState } = Route.useLoaderData() const theme = getTheme(authState) ...
Conditional route masking based on path params
Hi, I have a use case where I would like to mask the URL from
/app/views/$viewId/feature-x to /app/feature-x when $viewId === 'hidden'.
I have tried using the createRouteMask function with the params function, but it masks every route regardless of their $viewId path param.
Is it this possible to do using masking, or is there perhaps another feature that covers that case?...Loading data in the <Route> with `useSuspenseQuery` forces suspending and scroll reset (w/ example)
I'm trying to fetch data in the loader of a <Route /> that depends on search params and I'm not able to figure out how to do it right (?).
I created a sample repo: https://stackblitz.com/edit/tanstack-router-aiytgf7a?file=src%2Froutes%2Findex.tsx
Current behavior...
Is it possible to statically generate routes?
I have blog post data stored in my source code (I generate it from markdown files) so that it is statically available when deploying my app.
I have my blog post page setup like this which works nicely:
```
import { createFileRoute } from '@tanstack/react-router';...
ValidateLinkOptionsArray using "from" change of behaviour
I have been making use of
ValidateLinkOptionsArray and ValidateFromPath to create page tabs as shown in this example:
```typescript
export interface MenuProps<
TRouter extends RegisteredRouter = RegisteredRouter,...Is it possible to lazy load route tree instead of single lazy component?
According to the documentation at https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting, I can create a lazy route with a component, but I want to lazy-load an entire nested route tree. Is that possible?
Exporting the root route with a bottom `export { Route }` doesn't seem to work
Hey there. I'm not sure if this is a bug or intended behaviour, so I'm posting this here first.
In my
__root.tsx file I have this:
```...
Convert NavigationOptions -> RouteId
In our application, we have a configuration file which routeIds are active in the application. This let's use put routes behind feature flags or prevent specific users from accessing a route based on whether we decide they are allowed access. Auth is handled differently, but for example, if we are mid way through a feature, AB testing, or want to only enough a feature in development, this config can be used to determine if the route being loaded is active in beforeLoad.
We have two functions for this
1. isRouteActive(beforeLoadOpts) - Isomorphic, runs in beforeLoad
2. useIsRouteActive({ routeId }) - reactive, works in components...
Is it possibelt to rename the `routeTree.gen.ts` file to `route-tree.gen.ts`?
Is there any way this file name can be configured somewhere? I've always preferred to use kebab-case for my files instead of camelCase, and I'm wondering if I can rename this somehow. Thanks.
Quick ?: Do I track .tanstack/ in version control like routeTree.gen.ts?
FAQ states that routeTree.gen.ts should be tracked, but is it also necessary to track the .tanstack/ dir?
Invalidate context
Hey guys ! 👋
I think i'm missing something on how to properly invalidate the root context.
I created a router with a context like this :...