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 get type of params of a route?
I want to use the type of route params as component props. How to get them?
4 rerender with basic fetch
Hi all, I'm getting started with tanstack router, and I'm working on fetching some data. This isn't a huge deal, but I'm wondering why my component is fetching 4 different times when I navigate to the route.
When I navigate to the Posts route, I get that console.log for the posts print out 4 different times. I'm wondering why....
Problem getting View Transitions to work with SolidJS
hi, thank you for the great library.
like in the title. The exact same setup works fine with React, but Solid does not animate elements sharing the same
view-transition-name
I set defaultViewTransition: true on the Router...Best way to avoid route duplication for optional parent segment (file-based routing)
I'm using file-based routing and need to support an optional parent segment in my URLs.
Current routes:
```
/event123/overview/...
Is there documentation for view transitions in Tanstack Router?
I see there are some pages related to view transitions (e.g. https://tanstack.com/router/latest/docs/framework/react/api/router/ViewTransitionOptionsType#viewtransitionoptions-type) but there doesn't seem to be a main article about it.
Are view transitions ready to be used? If so, how?
Thanks...
Get root context anywhere in the code
so in my __root.tsx file, i write to the root context :' ` beforeLoad: async () => {
const session = await getServerSession();
return { session };
},``...
Is there a typesafe way to build a path to string?
Question
I'm using Tanstack Router and Tanstack Start and I'm wondering if there's a way to do something like:
```ts...
Route validators (params/search) when using TanStack Start
Hey guys, recently started using TanStack Start, amazing so far but encountered this quirk, I'm having a bit of trouble with route validators for params and search. When navigating within the app everything works as expected (same as using router on client apps only) but when paired with start i encountered an issue when entering the page from outside or just refreshing then the validators wont work, here is a short code to demonstrate.
```tsx
// posts.$id.tsx
export const Route = createFileRoute('/posts/$id')({...
How to change page title per route?
Back in the day we used to use React-Helmet. That seems to be unmaintained now for a while. I found this page but it doesn't explain how I can dynamically change the page title based on values on the page: https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
Anyone done this before?...
How to strip search parameters in beforeLoad or loader route methods?
Hi, I'm trying to consume some URLSearchParameters so that after a beforeLoad or loader async function finishes, the URL no longer has the search parameters used. Any strategies I should look into?
Page title based on loaderData
Hello, is there any way i can put some data into a title?
In a Route Component u would use
```...
Passing context from beforeLoad to loader
Hello all,
I am having trouble with passing extra context parameters down from
beforeLoad to my loader function. See the code snippet below:
```...How to retain type information in styled components?
I'm going through the motions of upgrading router to latest version and I ended up running into type errors with
@emotion/styled.
If I have a route with a token, a styled link will result in incompatible params.
I can work around it with LinkProps:
``typescript
const StyledLink = styled((props: LinkProps<'/path/to/$token'>) => <Link {...props} />)...`...High loading times on navigation
Hi, I created a fresh new project with tsr. But I noticed that when I enter a router on browser the loading time is very high. Using navigation API seems ok, but when I enter for first time to the app or move manually to another router the loading time increase. Here are a video demostration:
Change tab and route from within different component
I need to trigger a shadcn tab change in my route.tsx from within another component that is on the tab content. Is there a way to do this?
How to nested a 404 and 500 page?
Hi everyone, I'm working with TanStack Router and trying to implement different 404 and 500 error pages for different layouts. I have a
__root.tsx layout and a _protected.tsx layout.
My goal is to have a specific 404 page rendered when a route under the _protected layout is not found, without falling back to the 404 defined in __root.tsx.
Currently, I've tried defining a notFoundComponent within _protected.tsx. However, when I navigate to a non-existent route within the _protected layout, it always renders the notFoundComponent defined in __root.tsx instead....Router invalidate and context
We are looking at this one issue where router context gets stale and we need to call
.invalidate to keep it fresh.
Our auth is ran by Clerk so we want to grab the user and auth state whenever the session tokens have been changed.
This setup works but its causing a very annoying "jump to top of page" whenever the context is refreshed. I may have missed something in the docs somewhere so im asking here, has anyone done anything similar or would happen to think of a better approach?
...How To Route Masking Properly With File Based Routing
I tried route masking using file based routes. Here are the routes
```
// 1st
routes/ ...
Tanstack auth context not working?
Followed this documentation https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks
And I'm getting this error. I'm having a hard time getting any leads. If anyone else can help me out lmk! Thanks!
```...
Calling API and updating search params before loading a route
Hi, I have a case where BEFORE loading a route I'd really like to make some API call to check something and then update the searchParams based on the result.
Something like: click -> see loading -> API call in the background -> searchparams update -> route is loaded
What's the best way to achieve that? I tried beforeLoad for context update, but in middleware I only have access to the search params and not to context...