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

conscious-sapphire

5/31/2024

Auth Guarded Route doesn`t load lazy component

When I reset the site data, some lazy routes (auth guarded) in the dashboard don't load when going from login to their pages. After navigating through the dashboard, the pages start loading as they should. And then this problem does not occur. It seems that under some conditions lazy components are not loaded. Making routes with createFileRoute help to solve the problem. But i want to use this feature. Is there another way to create lazy route with file-base stracture? Help please.

metropolitan-bronze

5/31/2024

Nested Router Instances

Hi people, I'm trying to do a POC of a micro frontend using the Router on both host and remote. Unfortunately, when I try to load another instance of the Router on the remote module, I get an error (that is possible to see in the picture). I read the documentation and looked into the API reference, tried to find a blog post or an example project and no progress; so making this question here it's my last resort. With that, my questions are:...

flat-fuchsia

5/31/2024

Unable to upgrade from 1.17.4 to 1.17.5

I'm trying to get up to the latest version and I am getting multiple issues, the first one I am getting is a type issue when going past 1.17.5. (I am also getting this at 1.34.7 but I'm getting multiple error when I go to latest so I am trying to tackle them 1 by 1). Here's a screenshot of the type issues I am getting, not getting them in 1.17.4 but I for every version forward. Anyone have an idea? I believe I've setup my router like the doc is recommending. I am currently on typescript 5.3.3, I have also tried latest (5.4.5)...

unwilling-turquoise

5/30/2024

Error when built

My routes don't seem to be a part of my built code when publish my app to production but works fine in development

sensitive-blue

5/30/2024

Flashing on refresh on a protected route

why is the page flashing before redirecting on refresh? ```js import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"; import { validateSessionCookie } from "../../utils/session";...

ambitious-aqua

5/30/2024

Route-based sidebar issues

I'm attempting to implement a route in my application (route /foo) that itself displays fullscreen. Upon clicking a link on the page, I attempt to navigate to /foo/$id/steps. This should open a side-panel (drawer) that overlaps the existing /foo route's content. Additionally, a link is available inside the side-panel to navigate from /foo/$id/steps –> /foo/$id/connect, which replaces a subset of the side-panel's contents with different contents. Utilizing React Router V6, I was able to achieve this via roughly the following snippet React Router V6...

fair-rose

5/29/2024

Redirecting with Pending Component

We recently added logic to add a default pending component. Our route has a loader and on certain status codes, we throw a redirect to a different page. However, after we added the above to, whenever we throw a redirect the route match remains in "pending" with isFetching = true and pending = true (shown in TanStack dev tools). Before we added the pending, it redirected as expected, however, now it doesn't seem to behave as expected. When we have a regular Error thrown (i.e throw Error()), it renders the errorComponent as expected and the route match status goes to "failed" and isFetching is false. ...

correct-apricot

5/29/2024

Wildcards

Hi all We are faced with issue with migration to react router v6 and thinking about this library It’s possible to use wildcards/regex in paths, like it was done for RR <v6?...

rising-crimson

5/29/2024

Minimal router tests type error

Hi! I want to have a minimal router for testing, but I have defined a type for router, and now this is giving me a type error. '__store.state' are incompatible between these types. How can I adjust my minimal router to fit the type, or adjust the type to fit my minimal router? ...

passive-yellow

5/29/2024

Having a Slug instead of id in the route url

Hi i wanted to know if it's possible to have a slug instead of the id in the url but get the id in the params to make some call in the loader. Something like this : url :

http://localhost:3000/topic/real-estate

http://localhost:3000/topic/real-estate

in the code : ...

foreign-sapphire

5/29/2024

SSR Examples don't build?

``` ❯ npm run build:client

frontend@0.0.0 build:client vite build src/entry-client.tsx --outDir dist/client...

sensitive-blue

5/28/2024

Params typed incorrectly

I've seen a few discussions about this so it feels like a common error with a few different causes. Basically, if I have a route file called e.g. routes/admin/$activityType/index.tsx, like so: ``` import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/admin/$activityType/')({...

foreign-sapphire

5/27/2024

Implementing something similar to Processing Accumulated Route Context for just one app

I'd like to implement something similar to https://tanstack.com/router/latest/docs/framework/react/guide/router-context using useMatches the key difference being that I don't want accumulation I just want to specify the name of the app in the parent route and have that propagate to all children Currently however using ```ts const matchWithTitle = useMatches().reverse().find((d) => d.routeContext.getTitle); ...

stormy-gold

5/27/2024

Structuring navbar code, with an exception for the login page

I'm building a simple web app to learn how to use the Tanstack Router, and want to know what would be the best approach to structure my code. My app is supposed to always have the same menu/navbar while you're logged-in. However when you are not logged-in you should get redirected to the login page, that should NOT render the navbar. I have the redirect part working, however I initially had all my code for the navbar in the __root.tsx file, since I thought "oh the navbar is essentially a layout for the entire app". However, from what I understood from the documentation, the root component is always rendered, so I can't prevent it from being rendered in a specific route such as the login. Which leads to my question: should I keep my navbar code in the root component with a condition to only render when not in the login page? Or should I keep my root component mostly empty and create a new layout for the entirety of my app, with the exception of the login page?...

passive-yellow

5/27/2024

How to return the last page without search params?

``` // TanStack Router Import import {useRouter} from "@tanstack/react-router" // Ui Imports...

flat-fuchsia

5/27/2024

TypeError with Link component

I am using file based routing and I have a home page under "/home" and the following code in my navigation component: ```js import {Link} from '@tanstack/react-router' ...

fair-rose

5/26/2024

`Route.fullPath` not accessible from lazy file route?

Here is a lazy route I've defined: ``` export const Route = createLazyFileRoute('/auth/reset-password/')({ component: ResetPassword,...

absent-sapphire

5/26/2024

Back preserving previous searchParams

I have a /users page that has pagination ie. /users?page=2. I then have a details page at /user/<id> eg /user/7. I want to mirror the functionality of the browser and preserve that search param from the previous page with a custom "back" button on-page. I've read the docs but can't find a clear way to do this — preferably using <Link> if possible to keep it simple....

equal-jade

5/26/2024

Issue with Route.useParams() in a lazy file route

Hi Everyone! we started our project using TanstackRouter v1.19 and declared a lazy file route (as below) and we could access the route params via Route.useParams() and all was working fine. Now in TanstackRouter v.1.34 the same code has errors and lang param is unknown...

extended-salmon

5/25/2024

Link params type error

I have an item component that includes an edit button that should navigate to current route + '$id'. When using the Link component and include id in params, I receive the following error:

Object literal may only specify known properties, and 'id' does not exist in type '(current: {} | { category: string; } | {} | { id: string; } | { id: string; } | { category: string; id: string; }) => never'.ts(2353)

Object literal may only specify known properties, and 'id' does not exist in type '(current: {} | { category: string; } | {} | { id: string; } | { id: string; } | { category: string; id: string; }) => never'.ts(2353)

```<Link...

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