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

useful-bronze

12/21/2022

Infinite params (using route.navigate)

Hello! I have a special use case that has infinite params (like a file explorer) after a typed url /$type/$id/path/to/a/directory The infinite params are extracted from the fullPath (using useRouter().state.currentLocation by removing the route's matched path. How can I use route.navigate() by adding a different subpath ? (or there is a way to match typed recurring params ?)...

extended-salmon

12/21/2022

Pending components being rendered based on the tree's hierachy from the root route

What I'm looking to do, is set a common Pending Component at the rootRoute level, so it'd be used for all its child pages unless a child route has a pendingComponent defined. At the moment, a pendingComponent at the rootRoute level does NOT seem to work. Rather, this is what I've currently found to be what works....

extended-salmon

12/19/2022

Possible to go back with the Link component?

I have a question regarding whether it is possible to use the <Link> component, to go back? Use Case: This is a basic idea of my routes set-up which are functioning as expected. ```...

ratty-blush

12/17/2022

Can you edit a title via TanStack Router?

Hey, using the router to handling routing to pages - Is there a way to handle changing the meta title? For context; using React 18.2, Vite 3.2.3, @tanstack/react-router 0.0.1-beta.28...

ratty-blush

12/17/2022

routerState doesn't work in return of rootRoute component

Trying to do something like this in the rootRoute just like in the kitchen-sink example but getting the following error.

'routerState' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

Removing the condition in the return makes the error disappear and routerState is typed correctly....

xenial-black

12/15/2022

Should updating search params always cause a re-render?

When I use navigate to change search params, the URL is updating but the app is not re-rendering with the latest values. This seems like maybe a bug, or maybe I'm missing something fundamental? If I then take some other action, the next re-render will pick up the latest values, FWIW....

xenial-black

12/15/2022

Default search params on initial render

I have an SSR app (the server rendering is PHP, not React). So, the initial request goes to PHP, a page is rendered with a React app embedded, and tanstack router takes over from there. On the initial render of the whole app, the preSearchFilters doesn't seem to set default values. Related discussion from react-location here: https://github.com/TanStack/router/discussions/143#discussioncomment-1775952 Any way to set initial defaults? I guess I could navigate (with replace:true) in an effect but then I guess I would have to make all the params optional (given they won't exist on the initial render)....

correct-apricot

12/14/2022

Redirecting on log out

I'm having trouble getting my login page to render when calling the logout function provided by react-query-auth. It is changing the URL to /login, but not rendering the component specified by my login route. Leaving the screen and coming back, or refreshing forces the login component to render. I'm doing this via a guard like: ```js export default function AuthGuard({ children }: { children: React.ReactNode }) {...

jolly-crimson

12/8/2022

Next.js has made me soft

I know this is a total dumb question, but I'm struggling with the basics. I am trying to follow a similar pattern as the "React Example: Kitchen Sink Multi File", but am failing. I haven't even gotten to the "hard" part of wanting a component to handle both /page and /page/:id, I'm just trying to implement the start / and /page. Sorry for the dumb question. Here's the code: https://stackblitz.com/edit/vitejs-vite-ky3ywz?file=src/App.jsx....

adverse-sapphire

12/7/2022

what is the idiomatic way to compose routers?

for example, I have a web page of A, B, C. A is composed of pages called 1, 2 B is composed of 3, 4 C is composed of 5, 6 ...

adverse-sapphire

12/6/2022

storybook support?

although i use ladle, but it works similar to storybook. storybook https://storybook.js.org renders each component in isolation. what would be the idiomaitc way to render components that uses router features (i.e links)?

correct-apricot

12/5/2022

Link state prop

Is there an example of how to use the state property on a link component / navigate function? Also, I'm not sure if that's the place to pass additional data not included in the URL between routes or if there's another recommended way of doing that.

adverse-sapphire

12/5/2022

type of `Link to` is any

<Link to='/'>Home</Link>
    // ^ (property) to?: any

<Link to='/'>Home</Link>
    // ^ (property) to?: any

followed https://tanstack.com/router/v1/docs/quick-start but link to does not seem to provide type information...

extended-salmon

12/4/2022

About to give up, trying to use simple Link component with but it won't work.

Property 'search' is missing in type '{ children: string; to: string; }' but required in type '{ search: (current: {}) => never; }'. @Tanner Linsley I am not trying todo anything special here I am just linking to a new route, there's no dynamic params. The item.href is just a string "/" or "/home"...

correct-apricot

12/2/2022

Prevent loader from rerunning

Is there a way to prevent a loader from rerunning when certain conditions are met, similar to something like this from Remix (https://remix.run/docs/en/v1/api/conventions#unstable_shouldreload) ? I have several search parameters that change often and I want to prevent the loader from running every time one of these parameters change.

xenial-black

12/1/2022

what is Hierarchical 3-stage search param manipulation?

Hey I'm new to TanStack Router. I read through overview and I found it supports Hierarchical 3-stage search param manipulation, but I have no idea what it is. is it related with ecmascript stage-3?

xenial-black

11/26/2022

Using TRPC's react-query hooks in router

https://github.com/TanStack/router/blob/beta/examples/react/with-trpc-react-query/client/main.tsx* The whole point of me using TRPC was to not having to use fetch/axios/insert-other-fetching-lib but the example for TRPC and react-query uses axios. Is it possible to use only TRPC in the router loader functions but use TRPC through query-hooks in the components?...

continuing-cyan

11/25/2022

How to define a 404 or not found page?

I've searched the docs, but since they are still a work in progress, I didn't find anything yet.

eastern-cyan

11/22/2022

Incremental adoption guide

Do we have any examples of incremental adoption from React Router (let's say v5 for example). Is it possible to use @tanstack/router for, let's say, 1-2 routes, so I can experiment with it and convince my team to go further with it? I can explore this if no one had done that before, but any advice is appreciated 🙂...

fascinating-indigo

11/22/2022

How to handle anchors via router

I'm looking for an ability to handle anchors via router. For example I have 2 routes '/home', '/news'. Also there is a global nav menu to navigate throw this pages. In both I have some components, and this components have anchors. In menu users can navigate to this blocks via this anchors. So the question is. How to support it via router....

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