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

absent-sapphire

1/28/2024

What is the current way to not trigger whole tree reload (as parent) on sub-tree URL change?

Question in topic. They way so that it only triggers the reload of the changed part/changed route/new route, instead of the whole tree?...

continuing-cyan

1/27/2024

Question about type-inference

I have file base routing set up and have the following routes (pic 1) but am getting type errors when trying to add a <Link> to '/upload/someThing' (pic 2) Am I missing something simple here?...

plain-purple

1/27/2024

Does type interference work on navigate({search})

I am having little trouble with type interference with search and navigate. I took the example from https://tanstack.com/router/v1/docs/framework/react/guide/search-params#usenavigate-navigate-search- ```ts export const Route = createFileRoute("/_dashboard/exercises")({ validateSearch: ( searchObj: Record<string, unknown>...

fascinating-indigo

1/27/2024

how to get current url in the layout route?

I have a layout route and depending on the current url i'd like to highlight my menu

fascinating-indigo

1/27/2024

purpose of <MatchRoute component

```ts <MatchRoute to="/dashboard/invoices/$invoiceId" params={{ invoiceId: invoice.id,...

rival-black

1/27/2024

Should I put the `routeTree.gen.ts` in my .gitignore file?

The title says it all.

extended-yellow

1/26/2024

Filebased router

is there a way to create a filebased router but different folders? ``` features/ accounting/...

eastern-cyan

1/26/2024

Using `to` as a input type

Im trying to create a helper function for rendering some react components that get wrapped in a <Link/>. However, I'm finding that I get a typescript error saying I need to always provide params. I've got a route that uses path params. Is that why this is happening? My code looks like this: ...

deep-jade

1/26/2024

Nextjs app directory style routing

I was wondering if it is possible for to configure the vite plugin such that the folder structure is somewhat like nextjs app folder 1. Be able to group routes for layout 2. Only files say layout.tsx and index.tsx considered for routing...

eastern-cyan

1/26/2024

State reloaded using useSearch on hover link

When hovering a link that has search params set, useSearch updates it's state on hover even if the link has not been clicked yet. The router has the following options set: ``` defaultPreload: 'intent', defaultPreloadStaleTime: 0,...

xenial-black

1/26/2024

Saving app-entry.tsx causes "Cannot read properties of undefined (reading 'routeId')"

I'm using File-based routing with layouts. I have an _app layout and _auth layout and some nested routes. I'm using getRouteApi to use some of the route's hooks. In my app-entry.tsx i initialize the router and also have my app providers. I import the App function inside main.tsx. When hitting CTRL+S inside app-entry then i'm receiving this error -> Cannot read properties of undefined (reading 'routeId'). Refreshing the page or hitting CTRL+S in main.tsx or some inside the routes is fixing the problem. Am doing something wrong? Basically when i this occurs, i see in RouterDevTools this (1st image) but when refreshing the page i see the correct paths (2nd image) ....

fascinating-indigo

1/26/2024

using authenticatedRoute and context

I have this authenticated route that should inject userID into the context i can access this object in my sub-routes but user object is User | Undefined I'd like to mark a subset of file routes as authenticated, so they will have full User ```ts export const _authenticated = createFileRoute("/_authenticated")({...

fascinating-indigo

1/26/2024

using useSearch in a component, in fileBasedRouting

in the esxample in the screenshot https://tanstack.com/router/v1/docs/framework/react/examples/kitchen-sink-react-query-file-based you are using Route.useSearch() to get to the searchParams.. altough i realize that thisn is not cleanest, i'd like to use searchparams from the route in some of my components that are outisde of the route file....

graceful-blue

1/26/2024

Route branch based typing: is it possible?

I've got an app with two main routes, each with nested routes. ```ts const routeTree = rootRoute.addChildren([ homeRoute,...

fascinating-indigo

1/26/2024

Route structure

Hi! I’m using Router and so far it's been great, easy to understand and all that. I’m trying to set up something more complicated (for me) though and I am not sure I understand how I should go about it with Tanstack Router. So the relevant structure is like this:...

vicious-gold

1/25/2024

SingleSPA and tanstack router

We have a rather large collection of Reactjs micro frontends that are orchestrated by a framework agnostic (vanilla) single spa root config using SystemJS that has base routes to determine which micro frontend should mount at what path. Inside each microfrontend we are currently utilizing react router for the inner routes. Example Our customers MFE is mounted by the root config when the path of the user is /customers. Inside the customers MFE we have routes for /customers (a page to render a list of customers), /customers/:id (a details page about the customer), /customers/:id/events, /customers/:id/prices, etc... ...

xenophobic-harlequin

1/25/2024

Should I expect validateSearch to update the URL with the parsed query params?

Seems to do it on refresh but not when navigating with the Link component. ``` export const Route = createFileRoute('/_admin/admin/clients/')({ component: ClientList, validateSearch: (search) => {...

optimistic-gold

1/25/2024

Virtual Routes not working within layout routes

I have the route structure in the img $teamId/route.tsx export const Route = createFileRoute('/_auth-layout/$teamId')({}) when i delete this file i have to re-assign all my to params to to: '/$teamId/detail-layout/contact/$contactId' from to: '/$teamId/contact/$contactId', thereby the url contains the layout path....

sensitive-blue

1/25/2024

React Query + Router

When using TanStack Query together with TanStack Router, I am not able to show fresh data even though my context is a query client, and I am invalidating the query client on mutation. Any clue? My __root.tsx: `interface MyRouterContext {...

harsh-harlequin

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 ?...

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