TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

noble-gold

7/18/2024

_authenticated.tsx doesn't work.

I have the code in the attached screenshot in an _authenticated.tsx file in the "routes" directory but nothing happens.

continuing-cyan

7/18/2024

Using navigate in useEffect leads to false routing

1. I navigate via a <Link> to the /about page. 2. The component of the /about page has a useEffect which executes navigate function. 3. The navigate only applies an id query param, not more. 4. Expect: I would expect the final path to be /about?id=1234 5. Actual: The router navigates back to the home route / I'm coming from and applies the id=1234 query param there instead....

correct-apricot

7/18/2024

Why doesn't the bootloader appear when switching between routes?

Help me plz (sample sandbox code in the end), I want to make a loader when the user moves between routes, I tried to do this: documents.lazy.tsx ``` import { createLazyFileRoute } from '@tanstack/react-router'...

xenial-black

7/17/2024

Navigate to the same route but change the route param

Hello, is it possible to change the route param? My use case is, I have something like: /$companyId/settings /$companyId/users /$companyId/files What I want is to add a select on the page so at any moment the user can choose another company to see the details, so I want to implement a generic way to change the route param for the current route, how can I do that?...

rival-black

7/17/2024

Would you consider making `<Meta />` optional?

The reason for this ask is that while I understand that you're providing a nice experience for Tanstack/start, it might not be the only way people will use tanstack/router. In my case I am doing server rendering, but I am using tanstack/router to render only the content of body. You might argue that if I want to do things this custom... then I am on my own and it would be fair enough! I found myself in this situation because I noticed the exception for missing __TSR__ and this is how I figured out what's going on....

genetic-orange

7/17/2024

How do I access route context in a Route's meta()?

If I use

meta: ({match: { routeContext: { someField } } }) => { ... }

meta: ({match: { routeContext: { someField } } }) => { ... }

...

quickest-silver

7/17/2024

is route sorting broken, or is it my understanding?

https://stackblitz.com/edit/tanstack-router-dsvamt?file=src%2Froutes%2Fproduct.%24id.specs.tsx With two routes defined as - Product: /product/$id - Product Specs: /product/$id/specs...

adverse-sapphire

7/17/2024

Loader Navigation

Good day, was just wondering if there was a way to navigate inside the loader function of a route?

flat-fuchsia

7/16/2024

Global loading state

Hi, there is any approach to handle multiple if (isLoading) return <Loading message="Loading.." />? I have multiple components that loads and each time it fetch, it appears multiple loading messages. there is like a global approach to ?

sensitive-blue

7/16/2024

What's the recommended order of operations when using data loading and state management?

For example, I'm using Redux, and I'm wondering if the loader should populate the initial state of the store with the results of async calls, or if it should simply trigger a bunch of thunks that make these async calls.

passive-yellow

7/16/2024

Tanstack Router Conditional Rendering

I have a routing setup with u/tanstack/react-router where I need to conditionally render components based on the active route. Specifically, I want the InstructorDashboardComponent to be rendered only when the route is /instructor-dashboard, and when the route is /instructor-dashboard/course-builder, the CourseBuilderComponent should be rendered instead. Currently, with the given code, the InstructorDashboardComponent is always rendered at the top of the file, even when the route is /instructor-dashboard/course-builder, resulting in both the InstructorDashboardComponent and CourseBuilderComponent being displayed. How can I conditionally render the InstructorDashboardComponent based on the active route to ensure it does not appear when the route is /instructor-dashboard/course-builder?...

extended-salmon

7/16/2024

Error when building app, Routes are not found

I am posting this again as it appears my original comment went unnoticed, but when built for production, all my routes are resolved with

404 not found

404 not found

on the page despite this not happening during development

correct-apricot

7/15/2024

Nested routes with folders in file based routing

I'm using tanstack router for a current project. I've got an issue. Given the sample pseudo routing structure: ``` /_authenticated - folder + a separate layout /member - this needs to have a "layout" with 4 nested routes appearance.tsx...

useful-bronze

7/15/2024

Naming convention for router

I haven't really looked into how this works exactly but I think it's catching up to me now and some files seem to need some changes in their name. The issue that I am facing is that the edit.tsx page and the $id.tsx page should both be children pages of the users.tsx page. Since that page controlls where they are headed towards when checking for a specific user in the table. Also it's starting to feel like I have missed something when I read the Route Tree & Nesting(https://tanstack.com/router/latest/docs/framework/react/guide/route-trees) guide on the website. To me it feels like a have created a mixture between both the flat routes choice and the directory choice and need some help changing this....

rare-sapphire

7/15/2024

Support for nested dynamic routes?

Does this package support dynamically nested routes? Let's say I have an app which has 2 possible base URLs: - / - /base I want to be able to serve my app either from root or from /base. Can this work with tanstack router? I know dynamic routes are a thing, but if I were to use $base it would not catch the root route...

xenial-black

7/14/2024

How to make a unit testing helper?

I'm trying to come up with a reusable unit testing helper that wraps components in the necessary RouteTree + QueryClientProvider. However I'm finding that hooks like useParams are not returning expected results, so I can tell I'm not getting it totally right. The issue seems to be that the params object is returning a key of ** instead of workflowId, although the value for the param is actually right. I've created a basic reproduction in StackBlitz @ https://stackblitz.com/edit/vitejs-vite-5wm5gn?file=src%2FWorkflows.spec.tsx. You can run the tests via npm run test in the terminal....

rival-black

7/13/2024

Base URL case sensitive

Problem: Base path set: /Test1/Analyze When a user doesn't use the correct case sensitive base path for instance this:...

fascinating-indigo

7/13/2024

Redirecting when validateSearch fails

I'm trying to determine what the best practice is for the following, I've read through the docs and existing questions, and apologies if I've missed something obvious, but I can't seem to find an answer to this: I have a route component which requires an email address as a search param. I'm using a zod schema to validate this at the route level via validateSearch, so that the search params type will always be { email: string } (i.e. email is never null or an invalid email address). The schema is using strict validation with no default or fallback value, so an error will be thrown if it fails to parse. Ideally, I would like to redirect to a different page if the validation fails, without ever rendering the route component (so that if the route component does get rendered, it can be safely assumed that the search param is valid), but I'm unsure about the best way to achieve this....

exotic-emerald

7/12/2024

Layout for dynamic params

I'm trying to get a route layout to match two dynamics params pages, I'm trying creating a _layoute.tsx page inside the outer $id params but it doesn't seems working /search $id _layoute.tsx...

rival-black

7/12/2024

Need to refresh manually when using tailwind with rsbuild

"I am encountering an issue while using Tailwind with Rsbuild. Whenever I make changes to the code, I find myself needing to manually refresh the page for the modifications to take effect."ind with rsbuild, when i trying to make a change in code i need to refresh the page manually to make the changes happen

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs