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

12/26/2023

Astro Example

Anyone have an example of how to get Tanstack Router SSR working with Astro? There was an old example on the docs site that seems to have been removed, but it didn't use many of 1.0s APIs so I'm not able to get it working.

deep-jade

12/25/2023

Is there any obvious problem that you can see?

When I go to lets say /login or /notes nothing is loading even when user is authenticated. ```tsx const root = createRoot(document.getElementById("root") as HTMLElement); ...

conscious-sapphire

12/23/2023

When preloading and then navigating to a link, should the loader function always run twice?

I've enabled 'intent' preloading, and I have some conditional behavior in my loader functions based on the 'preload' boolean. I had assumed that the loader function will run twice in this situation, once with the preload=true when someone hovers over the link, and then preload=false when you actually click and navigate to that link. However, I'm seeing that sometimes the loader doesn't run the second time, particularly if you click on a link while the lazy component is loading. Is this expected?...

eastern-cyan

12/23/2023

FullSearchSchema - why do we need it at all?

While my PR #863 (https://github.com/TanStack/router/pull/863) fixed the issue #859 (https://github.com/TanStack/router/issues/859), I hit the following problems in my real-world app that uses a few search schemes which I guess are caused by the usage of recursive types: 1. TS compilation is now slooooow 2. I get the following TS error depending on how my route tree looks (I have not yet figured out the pattern): Type instantiation is excessively deep and possibly infinite. ...

eastern-cyan

12/22/2023

how to navigate to a route that has search params with default values?

I have the following route: ```typescript const searchSchema = z.object({ page: z.number().catch(1),...

flat-fuchsia

12/20/2023

File Based Router - Layouts

Hey! Are there next.js style layouts with the file based router? For example I'd want certain routes to have a navbar, certain routes to not have one but not wrap every page with a component manually For some reason getParentRoute is not a prop of FileRoute so I'm not sure how to do it...

adverse-sapphire

12/19/2023

Mantine ModalManager + Tanstack Router

Problem - when Mantine ModalManager (https://mantine.dev/others/modals/) with Tanstack Router, the modals seem to be rendered outside the base router provider (despite being instantiated inside of Wrap). Error - Uncaught TypeError: Cannot read properties of null (reading '__store') Homework - ...

foreign-sapphire

12/18/2023

Navigating in unit tests

After upgrading to the latest router version (previously on 69) navigating in unit tests broke and I haven't been able to figure out why. For unit tests, we create a test specific route tree and load the test route with memory history, something like this: ``` export const testRootRoute = new RootRoute({ component: () => {...

extended-salmon

12/18/2023

API docs

is there any date for the API section of router docs to be available? thx

foreign-sapphire

12/18/2023

Issue with authenticated routes, redirect and context

Hello, still having some trouble on how to structure my app and I'm getting some errors during navigation. 1) First problem is the first login after handling auth0 callback. After I redirect the user to the page they were when logging in with router.history.push I get an error on the function that use checks the context if the user is logged in, I need to refresh the page than it works. there error is "Invalid state" from the auth0 library and Warning: Error in route match: root Here is what I have now:...

adverse-sapphire

12/18/2023

Shared paths for different users but requiring different search params

Ok so this might be a little niche as a use case. I have two types of users, lets say a Teacher and a student. I want my base url to show different screens for the different users. ( This is simple I can just do a if (user.type==='teacher' )return <TeacherDashboard />) But on the dashboards I'm using search params for filters on the dashboard, and the search params will be different for each users. Is there an elegant way of doing this? ...

like-gold

12/16/2023

Guidance on passing hooks to router context?

I'm using hooks from Clerk to try to pass into the router context but not sure what the best approach is. I'm getting error `21:47:23.742 Cannot destructure property 'organization' of 'useRouteContext(...)' as it is undefined. occassionally. But this is where I landed, seems to work ok. but wasn't sure exactly what the best way of passing hooks in to the router instance's context. I feel like i've run into race conditions while working through this....

stormy-gold

12/15/2023

Redirect for home page

I would want the / path to redirect to another route for logged in users, the approach below seems to work but I'm not sure it's the right way to do it? ``` const indexRoute = new Route({ getParentRoute: () => rootRoute,...

adverse-sapphire

12/15/2023

Removing `<Link />` styling

Is there a way to fully remove any default <Link /> styling? The styling in our app is handled by Mantine's NavLink component. Wondering if there's a default way of removing styling or passing something like unstyled to the Link component. Thanks!

like-gold

12/14/2023

Issues with authenticated routes

Hi, trying out the TanStack Router. I'm experiencing issues with creating authenticated routes. It's a bit different from the approach using react-router-dom. The router has been set up correctly I believe, as it does work when I remove any routes related to authentication or layouts. What I have now: ```ts const rootRoute = new RootRoute({ component: Root });...

like-gold

12/13/2023

Best way to pass route location to reusable components?

I'd like to figure out how to sync a data table's state with the url. Am i following the right direction here? I have this generic DataTable and DataTablePagination component but imagine i need to pass in the route's location all the way down to set teh search params? ```ts export const contactsRoute = new Route({ getParentRoute: () => teamIdRoute,...

stormy-gold

12/13/2023

Getting the active path: Best Practices

I've just started using the router, love it! Feels much nicer to use than react-router-dom v6 as a Typescript user. One question is the best way to do this very simple pattern. Heres some psuedo code ```jsx...

adverse-sapphire

12/11/2023

Subscribe to Route Changes

Is router.subscribe the best way to re-render a component when a route changes? I feel like I'm missing something, is there a simpler approach? ``` const router = useRouter(); const [matchedRouteIds, setMatchedRouteIds] = useState( router.state.matches.map((m) => m.id)...

eastern-cyan

12/10/2023

Why ensureQueryData instead of prefetchQuery?

This question is overlapping with #query , but posting it here since I am asking about the usage of react-query in react-router: The react-router documentation and the react-router examples based on react-query all use code like this: ```typescript...

like-gold

12/7/2023

Passing context to a component in separate file? / Accessing useRouteContext

Is there any guidance to this? I'd like to have a layout that i can use a separate routes. This has a toolbar but want to render different things in the toolbar depending on the route . I'd like to access some info in context to pass to params on Navigate I tried to call useRouteContext in the layout but got this error ...

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