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

vicious-gold

1/25/2024

I tried using

navigate({ to: redirect });

navigate({ to: redirect });

but what happens it fails with

An error occurred: Invariant failed: Attempting to navigate to external url with this.navigate!

An error occurred: Invariant failed: Attempting to navigate to external url with this.navigate!

when navigating to (search.redirect = http://localhost:5173/dashboard/calender). As i guess it only wants the relative path which makes sense. Then I tried using

  React.useLayoutEffect(() => {
    if (auth.isAuth && search.redirect) {
      router.history.push(search.redirect);
    }
  }, [auth, search.redirect]);

  React.useLayoutEffect(() => {
    if (auth.isAuth && search.redirect) {
      router.history.push(search.redirect);
    }
  }, [auth, search.redirect]);

Which then does push the url, but doesn't actually seem to navigate and load the content. Only after a refresh. I guess i could just use the routes relative path when setting the search param or is it better to use the href ?...

national-gold

1/25/2024

how do I get the current path fully typed?

I have a LocaleSwitcher component which is responsible to change the language of my app. it basically convert something like app.com/en/... to app.com/de/... i'm getting this error because I pass a simple string to the navigate.to: ```...

unwilling-turquoise

1/25/2024

useMatchRoute: Type instantiation is excessively deep and possibly infinite.(2589)

I keep getting the "Type instantiation is excessively deep" error when trying to use useMatchRoute if I have a validateSearch somewhere in my tree. I edited the quickstart example on stackblitz for a demo but stackblitz is acting up so I'll just paste it here: ```ts...

other-emerald

1/25/2024

Is there a way to get Route.fullPath using createLazyFileRoute?

Im migrating to the new version, in the old version I just imported Route into my lazy loaded component. but now, I have a route in the route.tsx and a lazyroute in my route.lazy.tsx, do I need to import the route from the route.tsx to get fullPath (as a different name, as there is already a Route variable for the lazyfileroute in route.lazy.tsx)

exotic-emerald

1/25/2024

no validateSearch in createLazyFileRoute

Is there no search params functionality for lazy load component? I'm using v1.12.2...

distinguished-silver

1/25/2024

Remove search params with useNavigate hook

Is it possible to remove search params with the useNaviage hook?

continuing-cyan

1/24/2024

Help with NotFoundRoute overlapping with the root route

👋 - I'm new to Tanstack Router. Having a bit of a trouble where NotFoundRoute is overlapping with the root path and so hitting just the regular "/" route ends up rendering a "Not Found" message. Here's what I mean - I have a very basic routes folder where I have the root route file and one for "docs", as shown in the screenshot. my root route file looks like this __root.tsx...

continuing-cyan

1/24/2024

Help with understanding NotFoundRoute and routeTree

Hi folks, new to tanstack router here. I have a basic Vite/React/TS project. I'm having a having a bit of a hard time trying to figure out how to only render a "Not Found" component and subsequently what role the routeTree plays in this regard. Here's what I mean Following is my main.tsx ```...

unwilling-turquoise

1/24/2024

How to use file-based routing for deep url structures

I'm struggling a lot with file-based routing, for example using urls like: $id1/aaa/$id2/bbb/$id3/ccc/$id4 I've been reading the docs, which are pretty unclear, and trying all kinds of combinations of _ prefix and suffixes. ...

extended-salmon

1/24/2024

How to structure router project to make use of page title in router context

I've seen https://tanstack.com/router/v1/docs/guide/router-context#processing-accumulated-route-context but couldn't wrap my head around, how to modify the Vite project in a way that this is possible. Could someone lead me to an example? I am quite new to Vite and not sure how that would be done. Thanks!...

inland-turquoise

1/24/2024

Main Route in Outlet

Hello I am trying to figure out how to achieve something that should be simple but maybe I am making it more complicated than it actually is my "main" page is in a "dashboard" folder. The Route.tsx file is the file which is protected by auth and it has the Outlet that will render all the other pages of the dashboard. The problem is that the "route" is actually empty so if I go to "/dashboard" is empty while if I go to "/dashboard/beni-assicurati" it has the content of the Outlet, and I want "/dashboard/beni-assicuratI" to be the first page that the user see. The problem is that if I do a redirect in Route.tsx to "/dashboard/beni-assicurati" the app crashes as I think I am creating a loop. ``` export const Route = new FileRoute("/dashboard").createRoute({...

generous-apricot

1/23/2024

Contributing to Docs

I am trying to add a Migrate from React Router section to the Documentation. However, with the repo cloned and running locally, is there a way we can see the documentation to make sure our changes look correct? It seems we can only really add examples but I am probably missing something

rival-black

1/23/2024

router.navigate() while <RouterProvider> is not rendered

Hi, in a legacy app the <RouterProvider> will not be rendered immediately. There is a router.navigate(), which does change the URL and render the <RouterProvider>, but after render the root route will be shown. Please take a look at this demo: https://codesandbox.io/p/sandbox/eloquent-dust-ff62fc show and navigate triggers the router.navigate() and the render of the <RouterProvider>. The URL is correct but the content is wrong....

vicious-gold

1/23/2024

If with Outlet

Was wondering if there is a better way to do this ? Or if this would be the way to do it rn. Thanks ```function TestComponent() { const linksQuery = useSuspenseQuery<PageLinksResponse>({ queryKey }); const matchRoute = useMatchRoute(); ...

like-gold

1/23/2024

OAuth redirect causing route to run loader twice

I've been beating my head against this for a couple days now. I'm trying to implement the oAuth flow but my callback route's life cycle methods are being called twice when I come back from the google login page. Inspecting the devtools with preserve logs on shows the route is only loaded once, yet my beforeLoad and loader functions are called twice - even with nothing but console.logs in them. I redirect back to auth/google/callback and I have a route setup under routes/auth_.$provider.tsx that has the following code in it: ```...

national-gold

1/23/2024

how do you correctly mix path named routes & layouts?

https://stackblitz.com/edit/tanstack-router-hox4ss?file=src%2Froutes%2F%24lang%2F%24entityid%2F_layout.tsx I have this file directory structure but it won't match when I go to https://tanstackrouterhox4ss-4t4w--3001--3f7046a7.local-corp.webcontainer.io/aaa/bbb...

adverse-sapphire

1/23/2024

Implementing redirectTo during login

Hi all 👋 I'm currently trying out TanStack Router and I have in my app a fairly simple "redirectTo" search param that gets included in the URL if a user is redirected to login while accessing a page while unauthenticated. Using zod it's easy to type the search param as a string but the router then doesn't really like it as a value for the "to" fields. Does anyone here have tips/knowledge on how I should type the search param so it works as a valid path in the router? My implementation isn't set in stone and I can change it too if there's a better way to accomplish the redirect functionality with this router, right now I'm just copying over my code as it was with react router! Thanks in advance!...

stormy-gold

1/23/2024

How to update the context inside the component?

How to update the router context inside the react component.

sensitive-blue

1/23/2024

Property 'query' does not exist on type 'Partial <{}>'

I'm using React with Typescript, when I try to extract the search parameter from the Router State > Location > Search Query object it returns the typescript error shown in the title. Does anyone know how to resolve this? Code below: const searchParam = useRouterState({select: (s)=>s.location.search.query})...

absent-sapphire

1/23/2024

Extending PathParamOptions and similar

What's the proper way to extend PathParamOptions? At the moment I'm doing the following: ```tsx export type TabItemInner< TRouteTree extends AnyRoute = RegisteredRouter["routeTree"], TFrom extends RoutePaths<TRouteTree> | string = string,...

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