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

foreign-sapphire

2/27/2024

Optional parameter route

Hi there! I'm curious about implementing an optional parameter route. Specifically, I'm wondering if it's feasible to manage variations like workspace and workspace/${id} using a single component without registering two separate routes.

like-gold

2/27/2024

Nested file route not create nested routes

Why this happens? It will help me implement breadcrumbs, as each nested layout could be an item on the breadcrumb. This route file structure should produce something like this: ``` ......

equal-jade

2/27/2024

Active props className will not work properly when preSearch or postSearch

When using preSearch or postSearch active props will not work properly even though that search is optional. I will give the codesandbox example for reproduced that soon

plain-purple

2/27/2024

Router Context not updating

basically the same problem as here: https://stackoverflow.com/questions/77856598/tanstack-router-how-to-pass-value-from-another-context Setup is a little different because I am using react-query to get the currently logged in user. ```tsx export function App() {...

rival-black

2/27/2024

Is it possible to add a route to the routeTree?

I have a developer tool that I want to add to the route tree if the user is whitelisted for the tool. In this case, I only have access to the routeTree , I have tried casting routeTree to a Route and calling routeTree.addChildren but it results in losing in all my routes.

optimistic-gold

2/27/2024

Pending component for layout routes

How does setting a pending component on a layout route work? If I have a loader in the layout route and loaders in the child routes, will it display the pending component until all loaders finish or just the layout loaders?

ambitious-aqua

2/26/2024

Algolia search is broken?

On the Router docs page (https://tanstack.com/router/v1/docs/framework/react/overview), when I search for a term then click on it, I'm always sent to the docs page. Instead I would expect to be sent to the page I searched for.

flat-fuchsia

2/26/2024

Cannot get context value on child route

I tried to set data from async on before load at root and tried to use it in child route but it cannot get anything from context. Did I do something wrong? https://stackblitz.com/edit/vitejs-vite-bnyapb...

foreign-sapphire

2/26/2024

access the new route object from a router event handler

I'm trying to use router.matchRoute(event.toLocation) from a router.subscribe event handler but I'm only getting "false" as result. Am I doing something wrong? Is there some other way to get access to the new route object on a subscription basis outside of the ui framework? Here's a minimal example of what I'm doing: https://stackblitz.com/edit/tanstack-router-ffdbcl?file=src%2Fmain.tsx...

eastern-cyan

2/26/2024

File-base router for dashboard project

When using file-based router in dashboard project, the whole project is basically in a layout, except the login page, which is generally a single-page component. So here are a few solutions: 1. Wrap all pages with layout in __root.tsx, similar to the practice of the tanstak router reference code. In this case, the login page will also be wrapped in layout, which does not meet the actual requirements. 2. Change the layout component to _layout.tsx, after which all page file names should be prefixed with '_layout', except login.tsx, which can be independent of the login page, but the file organization will become miscellaneous. ...

ambitious-aqua

2/25/2024

on route change show full screen loader is it possible?

fair-rose

2/24/2024

hiii want to know how can i get the the state which we pass in the navigate({to: url , state :{x})

how can useLocation this to get the state which i have pass in the useNavigate

like-gold

2/24/2024

Matching multiple siblings at the same time

Hello everyone 👋 I am trying to solve what I feel is doable with the router but I am not finding a pointer to it. (Probably looking for the wrong terms) Esentially my app consists of a sidebar and a main layout. The issue is that the sidebar and main are esentially both standalone parts of the app and do not have any relationship to each other. ...

fair-rose

2/23/2024

State property not wanting to accept new parameters and needed a type casting when using!

```const mutation = useMutation({ mutationFn: registerUser, onSuccess: (data: AxiosResponse, variables: RegisterUserRequest) => { navigate({ to: "/auth/verify",...

complex-teal

2/23/2024

validateSearch using async data

Hello, I am building an app that rely on the selected project stored as “project_id” as a root search. The project_id is a string but also requires additional validation (does the user has access to this project ?) that will be done in my root component directly. ...

flat-fuchsia

2/23/2024

loaderDeps does not provide `{ context }`

I want to define loaderDeps from context not search (see docs: https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#loaderdeps) but it seems only search is defined? Is that a bug or on purpose? If it is on purpose, why is it only possible to define search params as loaderDeps? Since I use the context in the loader to pass data from the context as fetch arguments, I would like the loader to be triggered again as soon as the context data I'm using changes. Reference:...

metropolitan-bronze

2/23/2024

Upcoming Preloading Strategies: Progress and Release Date?

Excited about the upcoming "Render" and "Viewport Visibility" preloading strategies mentioned in the docs! Any progress updates and a ballpark release date? Thanks....

multiple-amethyst

2/23/2024

Infer valid "to" types for a root router instance

Hi, How would I retrieve the "to" field to use in a TS type definition for my applications router? The use case I have is I have my Button component, which can double as a link, and I want to include to /from in it's props. I want to get the typing that I would normally get from the native <Link> and useNavigate functions....

wise-white

2/22/2024

Default location if no back history?

Hi, I'm trying to utilize router.history.back() but if the user for whatever reason refreshes the page all of the history they can go back to is gone. Thus causing my back button to just refresh the page. How can I provide a default location to navigate to if there is no back history to go to? Or how can I detect if there's history to go back to, so can instead run a navigate() to a fallback location?...

grumpy-cyan

2/22/2024

Why to use `from` in navigations

Hi! I never used TanStack Router before, and now I am reading through the docs now and trying to understand why from is used when navigating. Take this example from docs https://tanstack.com/router/latest/docs/framework/react/guide/navigation#usenavigate: ...

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