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
[Help wanted] Nested routes
Looking to setup a few routes which share the same first param, is this possible?
Somethig like..
/clients/$clientId.tsx...
RoutePaths removed
Hi there I’ve been using the solution from:
https://github.com/TanStack/router/discussions/1719#discussioncomment-10524796
to provide type safety for my menu items in my sidebar.
My current approach looks like this:...
index route not loaded with nested group (with repro)
https://stackblitz.com/edit/github-1pegkpfq-qja16boq?file=src%2Froutes%2Ftabs%2F(tab-view)%2Ftab2%2Findex.tsx
as i understand the current file-based routing should load the tab1/index.tsx component but it seems not the case....
Multiple optional parameters
Hey everyone! Is it possible to create 2 optional parameters in root with tanstack router? We are rewriting the project and need to preserve the current URL structure. In documentation I found example for i18n https://tanstack.com/router/latest/docs/framework/react/guide/path-params#complex-i18n-patterns
but in my case routes should have both optional language and city. For example
${-$locale}/${-$city}/event/${event-slug}
This should support URLs like:
```...router string search query with quotes
```
const searchParams = object({
profile: optional(fallback(string(), ""), ""),
});
...
HTTP endpoint returning HTML?
My folder structure I have is
src/routes/users.ts and it looks identical to this first example: https://tanstack.com/start/latest/docs/framework/solid/server-routes when I hit the endpoint with postman, insomnia or even my front end I just get back HTML with a status of 200 and I have no idea why. I also have updated all my packages to the newest versions but I am still getting the same issue.Don't `resetScroll` on the same page
The default
resetScroll behavior is somewhat annoying when you have buttons/links on the same page that simply change some URL state.
Is there a way to set up our router so that resetScroll's default behavior is true when going to a different page, but false when going to the same page (i.e. just changing URL params)?...Module '"@tanstack/react-start"' has no exported member 'StartClient'
Im following the docs for integrating Sentry: https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/#step-2-configure
However, in
src/client.tsx it seems to be using an older version perhaps? What is my option here?...
404 page not showing when navigate to a folder path with no index. Example attached.
1. spin up a basic router project.
2. Add the following folder structure to the routes/ folder:
```
settings/
- _layout.tsx (add whatever html in here)...
Index route not rendering or registering
Hey!
I have a nested route architecture which goes like this:
```
routes/
|-- (dashboard)/...
avoid route nesting not working as expected
i've a file based routing defined as such:
```
.../$slug
/members...
Nested Path Params in React Router not working properly
I want to display all the comments of a given post and when I click in a comment it takes me to a page with $commentId: /posts/$postId/comments/$commentId
Right now I can only display the posts but I can't show their corresponding comments, let alone go to the commentId path
I have this file structure for now:
posts.route.tsx
posts.index.tsx...
Using prefixes in route paths and layouts like `/@{$username}`
migrating from next to start and struggling to get this setup working.
nextjs router setup:
```
app/...
Potential Solution for Support for Tagged Types in `ParseJSON` Type
I just wanted to post this here since it would very likely get missed since it is an old post, and I figure here might be a more reasonable place to get an answer:
https://github.com/TanStack/router/issues/4005#issuecomment-3327007509
Effectively, I have an approach with Interface merging that may enable the router to support parsing tagged types at a type level, where currently it instead treats them as non-stringifiable and requires a patch for any given tagged/opaque type implementation....
Getting "Function is not serializable" errors when passing functions into the router context
As the title says, I am trying to pass some functions (in this case, my API call client) to my router context to make data fetching easier. This is suggested as a best practice in the Tanstack Router docs as well.
However, I keep getting errors saying "Function is not serializable" and my builds are now failing. This issue seemingly has occurred overnight in our application.
Using Tanstack Router 1.132.6 and Node v22.19.0...
Modify Router Context from deep in React-land
Hi everyone!
I'm trying to figure out the idiomatic way to modify the Router Context deep within the component tree. At the root, I know we can pass values to the
RouterProvider via the context option, but what's the recommended approach if I want to update context further down?
For example, I have a section of my app wrapped in a Provider. I can access its value in React via use, but I don't see a straightforward way to sync that with the Router Context to be able to access it in, e.g., loader....Default child route for layout route
I have a layout route that renders some tabs that switch between several child routes. Let's say we have
/parent, then /parent/tab1 and /parent/tab2.
Now, I don't want the index route to ever be rendered - the user should be redirected to /parent/tab1 by default if they attempt to visit /parent. I can achieve this by throwing a redirect in the beforeLoad and looking at the location there, but this is not typesafe.
Can I find out if no child route is matched? Or can I provide a fallback for the Outlet? I've looked at the documentation and didn't find anything....How to trust that server didn’t leak to client?
How can I trust and ensure that server privates didn’t leak into client?
I tried using .server extension, placing functions in a /server directory, etc. they all are still bundled into the client.
I don’t know any to just use “serverOnly” on functions but feel assured that a global const doesn’t leak....
Best way to do dynamic layouts?
How can I get a parent layout component to dynamically render content based on what child route it is currently on?
For example, if I have nested routes like /fruit/banana and /fruit/apple, how does the parent component know to display a banana or an apple image in a shared sidebar, while the child component renders the corresponding details? The best way I can think of is to just use useLocation to get the path and use the path in a switch statement to return the right displays. Is there a better way to this? I was wondering if there was some design pattern to resolve two separate "outlets" on the same path....
Tanstack Router + oauth2-proxy
Has anyone integrated oauth2-proxy with router?
I need to integrate Keycloak on the day-job and a provided mechanism is an oauth2-proxy sidecar
Currently hitting my frontend URL/oauth2 Tanstack picks up the response.. I’d imagine I need to allow the proxy to go through?...