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

extended-salmon

8/24/2023

How to pass multiple variables using loaders with router?

Looking at this example ``` getContext: ({ params: { postId } }) => { return { loaderOptions: createLoaderOptions({...

metropolitan-bronze

8/22/2023

Link Component is requiring search prop

I've been trying to use the link component, but they all have type errors because they say that the search prop is required. Would love more info here.

fascinating-indigo

8/21/2023

Dynamic Routes with useRoutes. How to get params from the url ?

I got this routes that i later use with useRoutes hook. I need to create dynamic url of email with serial. And i need to get serial param from url but if i use useLocation or useParams hook i got no data. ``` import React from "react"; import App from "./../app.jsx"; import { Navigate, useLocation } from "react-router-dom"; ...

conscious-sapphire

8/21/2023

Handling Component Display Scenarios in a Dynamic Data Loading Environment

In a given scenario, a loader attempts to retrieve data, but encounters an outage in the service. This results in the display of an error component. Subsequently, even after the service is restored, the error component persists instead of the intended component. ```js export const postsRoute = new Route({ getParentRoute: () => rootRoute,...

sensitive-blue

8/19/2023

useNavigate hook

Is it just me or the useNavigate hook doesn't have typesafe on navigate({to: "no type safe here"})?

fascinating-indigo

8/17/2023

Getting the destination url in the loader to throw a redirect

When you are throwing a redirect in a Route loader, is there any built-in way to get a string with the intended destination (path + search params) for the current Route? The use-case here is an auth scenario where I'd place a string in a redirect_url search params to navigate to once auth is completed or on oauth2 callback. Or should I just be creating this myself by parsing window.location into a string?...

wise-white

8/17/2023

react 17 support?

Hi, Is react 17 supported at the moment? I was using it with react 17 and working on beta 115, but I am getting R.startTransition is not a function on beta 151

exotic-emerald

8/16/2023

How to redirect to a path with params?

I have a page like the following snapshot . Normally the user need to fill the table name and cluster name and then click the button. How to redirect to this page with table name and cluster name pre-filled? something like redirect to http://.../this_page?table_name=table1&cluster_name=cluster1, and hope to get the page with table/cluster pre-filled and only need to click a button

vicious-gold

8/15/2023

activeProps Paintpoint for classname priority

So i'm setting up navigation and noticed i'm running into a painpoint with the activeProps concept and class name order. for example, if i have something like this: ```tsx <Link to={item.href}...

deep-jade

8/15/2023

Navigating from loader

Is there any way to navigate from route's loader function? useNavigate can't be used outside of react components and importing router would cause a circular dependency.

deep-jade

8/15/2023

Type instantiation error when combining parseParams and deeply nested route tree

I'm getting the Type instantiation is excessively deep and possibly infinite. ts(2589) error, when I have a route with parseParams on the top of the route tree and more than 8 nested sub routes under it. Removing parseParams allows me to have more than 20 nested routes without the error. Any ideas what might be causing it? Running beta-150...

vicious-gold

8/14/2023

Handling High Level Auth With Hooks

👋 @Tanner Linsley so like i was getting at on twitter, I've been trying to figure out the right way to go about setting up auth with the router when doing something like the below. The example in the docs was fairly static, so was trying to figure out a larger solution. I've tried various things with beforeLoad and with context, but haven't been able to nail it down.
I've reeled back the below to a simple base that works, but needs to be cleaned up to a proper setup. Any thoughts on a best approach here? I'm fine redirecting to that login path when a route is unauthorized or a login page i can pretty up -- either works for me. Happy to provide more code, it's just hard to get something fully running on code sandbox since i'm using an IDP in docker for the auth....

sensitive-blue

8/13/2023

Help to understand the need to `getParentRoute`

Why is the need to use getParentRoute when defining the new Route()? ```js const indexRoute = new Route({ getParentRoute: () => rootRoute, path: '/',...

national-gold

8/12/2023

How to wrap <Link /> in a styled component and sync the active state? And get typesafety

@Tanner Linsley saw somone asked you this here as well https://discord.com/channels/719702312431386674/1007702008448426065/1128108663819747490 I tried this implementation below. Not sure if this is the best way of doing this but not sure how to get type safety of the routes and apply active/inactive styling with the button wrapping the Link ...

modern-teal

8/11/2023

Use in production, roadmap

Hi everyone, I'm currently starting to work on a big refactor for a project (basically rebuilding the entire app). With it, I'm considering to move away from react-router for a more typesafe solution like tanstack router. I have a few questions: 1. Has anyone used tanstack in production and what is your experience so far? Are there frequent breaking changes that cost lots of time to fix?...

afraid-scarlet

8/9/2023

Link searchReducer provides unvalidated search values

Hi, I am using zod to validate search params, just like in the example in the docs. When I visit my route with no search provided, I expect it to use the fallback of page=1 behind the scenes....

quickest-silver

8/7/2023

Not possible to use search params in root route

Upgraded to the latest version (139), and it is now not possible to use search params in the root route. StackBlitz: https://stackblitz.com/edit/tanstack-router-z9epui?file=src%2Fmain.tsx...

ambitious-aqua

8/6/2023

react-location's documentation

Hi guys, can I find somewhere react-location's documentation? Seems like everything switched to router...

quickest-silver

8/4/2023

tanstack router inside React router

I’ve added a micro application using tanstack router inside a larger React router project. The initial loading works fine, but afterwards the routing inside tamarack router is not affected by the actions taken in the app wrapping tan stack router. Does anyone have any idea on how to make tanstack router and react router work together? Or is my best bet converting the whole thing to tanstack (will be a large refactor)?...

yappiest-sapphire

8/3/2023

Re-renders on Link hover

My component tree looks like this: ```- LayoutRoute - LayoutSidebar - SidebarNavigation...

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