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
Dynamic root path
Hi! I have an app that is dealing with internationalisation.
My route structure is something like
/
/about
/whatever...Code-First routes: No child routes found for Outlet
So I am developing TabComponent-based (BlueprintJS) app, where each Tab can have sub TabComponent.
I tried different things but anyway if I log childMatches in root it is saying nothing found, so Outlet displays nothing. How should I build routes to make them appear in Outlet?...
How to reuse a child routes
#react-router
I have a route like this:
- // will show members of $id company
- // will show all members
...
company.$id.members
company.$id.members
members
members
Best approach to render a page based on param?
I have
driveId as a param, but technically they are too different pages.
My current approach would be to have a route.tsx for $driveId folder, and then determine which component (page) to load based on that, but I'm wondering if there is a better approach?...Intergrating Start with Logto
Ive done alot of these:
const logto = typeof window !== "undefined" ? useLogto() : null;
const LogtoWrapper = ({ children }: { children: ReactNode }) => {...
Issue with API File Route
I have set up the api route the same as on the documentation, the
this is my app/api.ts
```
import {...
Issue with ref type when using createLink with Motion for React (prev Framer Motion)
Repro: https://codesandbox.io/p/devbox/github/KirillTregubov/tanstack-router-repro
Related discussion: https://github.com/TanStack/router/discussions/2375
I want to add this example to the docs, but I am getting a ref error inside my project so I would appreciate some help resolving this issue before showing others how to accomplish this.
...
Importing routes with feature folder structure
I am wanting to implement Tanstack Router with file-based routing in my app but my app currently uses a feature style app structure.
Currently I was thinking about reorganizing similar to Bulletproof Next js pages example repo.
If I am store my Pages in a completely different "feature" folder, should I just be importing in the Router from within the Routes folder? ...
Clearing search params does not work on mount?
I have a search params validation when i get ids of some stuff, then in the component i get this ids from useSearch and check if this ids exist in API resposone.
if yes i keep the search params and do other actions
if no i wanna clear the params
...
How to reset search params when not validated?
How to completly clear search params when not passed validation?
heres my validation:
```js...
How to differentiate between navigation from other page, and a full page refresh?
Is there a way to detect the difference between a page load after navigating from another page, or a page load from a full page refresh? They both have
cause: enter, and I haven't found any other mechanism I can use for this either.
I intend to use it to control whether to scroll an element into view or not....Typescript don`t work
Guys, is anyone know how to fix this problem? I created new vite React + Typescript project started to setting up tanstack router by getting started guide, but when i added file index.lazy.tsx in routes folder I see an error. And typization for navigation also don't work. Can someone help me with this issue?
Start with static pre-rendering but no need ssr
Like the title, I want to use Static Pre-rendering for landing and first couple of pages such as login, signup page. After that, I only want Client side rendering since it may needs dashboard fee like some complex UI changes, so guess no need SSR. I wish I can create Static pre-rendered site for the first couple of pages with only Tanstack router, but seems not supporting on there. Does SSR is by default in Tanstack Start? I wish I could deploy to AWS S3 with the couple of static sites and SPA a...
Dynamic breadcrumbs
How can I create dynamic breadcrumbs? I’m trying to use router state with matches, but it deletes the history.
E.g.: Home -> User -> Settings, but you can also reach settings from Home -> Settings.
Is this possible in a simple way? Or do I need to push/pop into a breadcrumb array which I keep in the context?...
Can't Use `useSearch` in Reusable Component Across Multiple Routes
I'm having trouble using useSearch in a reusable component when working with multiple routes in a TanStack Router project. Here's a breakdown of the issue:
Code Example
The Reusable Component:
```tsx...
Mocking/stubbing dynamic path params in storybook stories.
I'm trying to use tanstack-router with vite, react and storybook.
I have file-based routing setup and working on my react app, but having issues with dynamic path params in my stories.
Ex. /organizations/$organizationId renders a component: ViewOrganization which then pulls organizationId from
And I have a decorator creating a memory router for storybook. This works for non-dynamic routes....
useParams({ from: "/organizations/$organizationId" });
And I have a decorator creating a memory router for storybook. This works for non-dynamic routes....
Prevent errorComponent on non-critical loader failure
Hi.
Not sure if my title is very clear, sorry English is not my first language. So, in my case, in a route loader, I fetch some data but there are not mandatory for the page. Instead of an errorComponent blocking all my page, I would prefer to show my page and handle the error in it for just this part. I did this :
```tsx...
How to create multiple routes with createFileLazyRoute e.g. / and /page/$page & <Suspense>
My goal is a single component that handles / and /page/$page
I tried the following, but when I save it it removes the (page/$page?) from the createLazyFileRoute... I'd prefer to not have to create a separate lazy route if at all possible
```import PostCard from "@/components/PostCard";...
Routes with specific search params validator
How would I got about defining a type that accepts any of my routes, but with a specific search params valdidator? I use Zod for the validator if that matters.
Multi Tenant Setup in TSS
I am currently exploring TanStack Start and would like to implement a multi-tenant architecture. While I assume this should be feasible using Nitro proxies, I haven't been able to figure out the correct approach or configuration.
Would it be possible to provide an official guide, example, or even documentation on how to set up a multi-tenant system with TanStack Start?
This addition would greatly benefit developers looking to adopt TanStack Start for SaaS applications or projects requiring multi-tenancy....