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

rival-black

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

judicial-coral

2/22/2024

Pass context to another root (createRoot)

I'm trying to create a map control using "react-map-gl" which has a tanstack router <Link/> component in it. In order to create a control on the map I have to create a new react root using React.createRoot. That react root doesn't have access to that actual app's <RouterProvider/> context so the <Link/> component doesn't work. It gives some error about state being null. I can't wrap the new root in another <RouterProvider/> because I don't want to render an entire new app/routeTree. I just want to be able to use the <Link/> component. I've also tried using getRouterContext() and routerContext.Provider similar to here:...

genetic-orange

2/22/2024

createRoute and createLazyRoute example + docs

The docs for createRoute gives typescript errors when I try use the example from the doc. Is there an example of this working somewhere?...

correct-apricot

2/21/2024

How to reload page?

Hey guys, can you help me with how to refresh the page? In React Router, I could use navigate(0), but how do I do it here? Or should I go with window.location.reload? Though, I'm not sure if that's the best option)

firm-tan

2/21/2024

Can I use router.navigate to change routes outside of React context?

Hi! I've got a React app with a legacy navigation written in Knockout. Is it possible to trigger route update from outside of React context, e.g. when a user clicks a link in this Knockout navigation? Would it work if I imported the router object in my KO code and called router.navigate when the user clicks a link? We're currently using react-router library, but I'm thinking about migrating to this one. Just want to make sure this use case is supported before we start the migration....

foreign-sapphire

2/21/2024

Typings not working in Vite project

Hi Guys for some reason my Tanstack router typings are not working as expected, I also receive an error while trying to register the router instance I guess it has something to do with my tsconfig but I am not sure...

deep-jade

2/20/2024

beforeLoad with file based routing?

Hi, I need a beforeLoad and i'm using file based routing but the docs only mention how to do this when you're defining the rotes through code as far as I can see. Can someone point to me on how to add a beforeLoad? My use case is that I want a beforeLoad in my root index.component.tsx to check if i'm authenticated and redirect to /login if not. I'm checking the docs here: https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes...

adverse-sapphire

2/20/2024

[SOLVED] Not found being presented for working route

I am following the Authenticated Routes docs. I've set up a redirect to occur when the user is not logged in. I apply a redirect search param just like the docs do. But I am experiencing weird behavior where I can reach a protected route through normal navigation. But refreshing the page (triggering auth again) sends me to the not found component. I don't perform any other redirect other than what the docs have provided. Why would this happen and how can I fix it?...

foreign-sapphire

2/20/2024

Multiple outlets

Hi. I've an app where there is a login screen that has completely different ui than whole app. I'd like root route - / to have no additional ui and for all of the other routes I'd like to use <Outlet /> thats wrapped with a navbar etc. How can I achive it?

like-gold

2/20/2024

navigation middleware

Is there any way to hook in middlewares between navigation attempts being done via Link and useNavigate to perform arbitrary logic and/or short circuit the navigation. I’ve looked into useBlocker and it’s not what I’m looking for (i dont want to impact navigations happening outside tanstack router, ie regular browser/history navigations). The reason I'd like to be able to do this is that I'm using tanstack router in a micro frontend scenario. Some of the routes need to be visited via a full page reload, while other routes are purely client side and work fine as-is. My plan is to annotate the micro frontend routes with a flag using router context, and then with this middleware I'll short circuit the navigation when a navigation is attempted to be made to those type of routes and I'll manually trigger a full page reload. If such a middleware functionality existed, that is. My current approach is to customize the Link and createRouter primitives, essentially monkeypatching this behavior in. I'm wondering if there's a cleaner way to achieve this....

like-gold

2/19/2024

Optional Catch-all Segments in File Based routing

I know this concept from Next.js: pages/shop/[[...slug]].ts https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments ...

eastern-cyan

2/19/2024

Deep routes with route matching

Hi, Anyone here that knows of a way to create deeply nested routes where it is possible to use useMatches (or any other function) for creating breadcrumbs? ```...

rival-black

2/19/2024

useRouterState - documentation?

Hi, I saw this in the Kitchen Sink React Query File Based example in __root.tsx: ```function RouterSpinner() { const isLoading = useRouterState({ select: (s) => s.status === 'pending' }) return <Spinner show={isLoading} />...

rare-sapphire

2/19/2024

Type safe HistoryState in navigate

We're relying on HistoryState in our application and while params and search are both very well handled in the docs and the API, I find HistoryState far less easy to work with.. probably a skill issue 🙂 . I keep running in to the TS error using navigate ```...

foreign-sapphire

2/19/2024

Infer context types in authenticated routes

Hi. I am using this example from tanstack router https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes-context I'd like to change context type so the user in authenticated routes is not possibly undefined. In this example its dashboard.tsx Since we check user before load I'd like to overwrite user type. How can I do it?...

like-gold

2/18/2024

Authenticated Routes

Hi everyone, I'm new to Tanstack Router and I'm encountering some difficulties. How can I centralize this type of validation across multiple routes? For instance, in the provided example where I have 'profile' routes, I also want to apply the same validation to 'registrations' routes to check if the user is logged in....

optimistic-gold

2/18/2024

Router.invalidate() stopped working after update [solved in 1.16.6]

Hello! I have a strange bug, which I couldn't resolve yet. For some reasons router.invalidate() stopped working after the last update. (I updated from 1.16.0 to 1.16.5) Any idea how to fix this? Thank you very much for your help!...

quickest-silver

2/17/2024

How to do shallow routing?

What is the recommended way to do shallow routing? Is there some file name one can have when using the vite plugin?

sensitive-blue

2/17/2024

Auth context

I have strange problem. I have AuthProvider in context that gets data from supabase client. https://pastecode.io/s/frctwjra But I get null on router context when I check if user is authenticated....

rare-sapphire

2/17/2024

Blocker and link

How can I trigger a blocker when I click on a link? The link just leads to another page in the application

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