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

evident-indigo

12/5/2024

Storybook with Tanstack Router

I'm on a project using turborepo with vite react app using tanstack router and a ui package using storybook. I was tasked with creating navigation for the app. I wanted create a component with a story in the ui package and the following occured: I was wondering the best way to use Link in storybook. I was wondering if the best approach is to put tanstack router in the root directory and share the router with the app and package. After a team discussion I was outnumbered 4 to 1 telling me the router should not be used in stories ever and the package should not be in the root. ...

deep-jade

12/4/2024

I could be doing something wrong, but are the start examples broken for anyone else?

I could very well be doing something wrong, but are the start examples broken for anyone else? The router examples seem to work fine. https://tanstack.com/router/latest/docs/framework/react/examples/start-basic...

passive-yellow

12/4/2024

Migrating from React Router is Code-based Routing or Virtual Routing best choice?

We have a large multi-page app that we are converting page by page into a SPA. We started with React router, but have run into some problems and want to try TanStack. We can't use file based routing and all the identifying information for each page is in its search parameters (ie: ?id=xyz&tab=content). We would like to lazy load components as they are routed to since these are pretty heavy pages with lots of components and requests waterfalls that we only want to load when actually needed. What...

other-emerald

12/4/2024

Property way to handle not found components with permissions

Hello, we are building an dashboard where i already handle authentication, but a user also has permissions to view certain pages or not. This i how i thought i would handle this ```ts export const Route = createFileRoute("/_app/claims/$claimId")({...

extended-salmon

12/4/2024

throws in loader causes errors in console even if there is an error component

I started this conversation in the query section, but it looks like it's more of a router question so I'm moving it here https://discord.com/channels/719702312431386674/1313646077219704935 I throw an exception in the loader (query does on error), but I can't stop the loader from writing the error message into the console. Even if the errorComponent on the root route is picking up the error and reacting to it ...

sensitive-blue

12/4/2024

Auto-redirect

similar to this other question, i want to auto redirect to a child route on nav -- i.e. when navigating to settings i want to redirect to settings/organizations -- i tried the below along with several iterations and none can properly redirect (the nav routes work as expected) ```tsx import { Link,...

magic-amber

12/4/2024

Linking to same page and updating search params clears URL path

<Link to="." search={search} /> no longer works, my path is dropped to "/" yet search params are correctly updated. This used to work.

fair-rose

12/2/2024

is there any co-relation between useQuery and navigation container from react native?

getting the below error - Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? {getAppointmentsQuery.isLoading || loading ? ( <ActivityIndicator size={"large"} color={theme.colors.primary} /> ) : (...

fair-rose

12/2/2024

How to handle server 500 error?

I want to show separate screen for 500 api response. I made listner for listening for 404 response and when detected i just do: ``` throw notFound({ routeId: '/_authorized/app' });...

extended-salmon

12/2/2024

Dynamic root path

Hi! I have an app that is dealing with internationalisation. My route structure is something like / /about /whatever...

conscious-sapphire

12/2/2024

Code-First routes: No child routes found for Outlet

So I am developing TabComponent-based (BlueprintJS) app, where each Tab can have sub TabComponent. I tried different things but anyway if I log childMatches in root it is saying nothing found, so Outlet displays nothing. How should I build routes to make them appear in Outlet?...

flat-fuchsia

12/2/2024

How to reuse a child routes

#react-router I have a route like this: -

company.$id.members

company.$id.members

// will show members of $id company -

members

members

// will show all members ...

stormy-gold

12/2/2024

Best approach to render a page based on param?

I have driveId as a param, but technically they are too different pages. My current approach would be to have a route.tsx for $driveId folder, and then determine which component (page) to load based on that, but I'm wondering if there is a better approach?...

rising-crimson

12/1/2024

Intergrating Start with Logto

Ive done alot of these: const logto = typeof window !== "undefined" ? useLogto() : null; const LogtoWrapper = ({ children }: { children: ReactNode }) => {...

ratty-blush

12/1/2024

Issue with API File Route

I have set up the api route the same as on the documentation, the this is my app/api.ts ``` import {...

conscious-sapphire

12/1/2024

Issue with ref type when using createLink with Motion for React (prev Framer Motion)

Repro: https://codesandbox.io/p/devbox/github/KirillTregubov/tanstack-router-repro Related discussion: https://github.com/TanStack/router/discussions/2375 I want to add this example to the docs, but I am getting a ref error inside my project so I would appreciate some help resolving this issue before showing others how to accomplish this. ...

fair-rose

12/1/2024

Importing routes with feature folder structure

I am wanting to implement Tanstack Router with file-based routing in my app but my app currently uses a feature style app structure. Currently I was thinking about reorganizing similar to Bulletproof Next js pages example repo. If I am store my Pages in a completely different "feature" folder, should I just be importing in the Router from within the Routes folder? ...

fair-rose

11/30/2024

Clearing search params does not work on mount?

I have a search params validation when i get ids of some stuff, then in the component i get this ids from useSearch and check if this ids exist in API resposone. if yes i keep the search params and do other actions if no i wanna clear the params ...

fair-rose

11/29/2024

How to reset search params when not validated?

How to completly clear search params when not passed validation? heres my validation: ```js...

inland-turquoise

11/29/2024

How to differentiate between navigation from other page, and a full page refresh?

Is there a way to detect the difference between a page load after navigating from another page, or a page load from a full page refresh? They both have cause: enter, and I haven't found any other mechanism I can use for this either. I intend to use it to control whether to scroll an element into view or not....

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