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

ratty-blush

3/10/2023

How do you link to a specific section of a page?

I tried the hash prop like https://tanstack.com/router/v1/docs/guide/navigation#hash-links, but it doesn't work; it goes to the page, but not to the specified section. ``` <Link to="/">Home Page</Link>
<Link to="/" hash="project"> Home#Project...

plain-purple

3/9/2023

Is there any up-to-date example of using data loaders?

I can see new Route() don't have loader property anymore, and useLoader hook as well.

unwilling-turquoise

3/8/2023

When navigating, the URL updates, but the outlet doesn't render. On page reload, it works.

Apologies if this has been asked before: please send the link if that is the case. I am using dynamic / lazy loading for my routes. When I use a Link, Navigate, or the useNavigate hook, the URL will update to the expected route, but the outlet does not render the content....

other-emerald

3/8/2023

Could not resolve "@tanstack/react-router" in VIte

Not sure what this means. Or how to get around it...tried looking around but haven't had much luck. I'd like to try and use the devtools but maybe I just can't 🤷‍♂️

exotic-emerald

3/7/2023

Are examples/package up-to-date

I can't seem to be able to npm install and run the examples as provided in the docs using beta.83 - a lot of the types are not exported - for example, the docs explicitly mentioned using the loader property for Route, but this does not exist? Are the docs/package up-to-date? If not, when can we expect a consistent version of docs <-> package. Thanks a lot - excited to try this out.

fair-rose

3/5/2023

Error replicating Kitchen Sink Example

The error comes in the component definition: ``` component: function Users({ useLoader, useSearch }) { const navigate = useNavigate()...

sensitive-blue

3/4/2023

Link not typed correctly, missing routes

With the following setup code: ```tsx const rootRoute = new RootRoute(); const authenticatedRoutes = new Route({...

fair-rose

3/3/2023

Mismatch between version beta.53 and the docs?

Getting "no exported member" errors for RootRoute and others.

foreign-sapphire

3/2/2023

Child route not loading correctly?

For some reason when I set my index route to something other than / It will load the route url, but it will not load the proper component. The index route loads fine but any time I try and use link to navigate to a new route, the index route stays loaded. ``` // Create the root route const rootRoute = new RootRoute({...

continuing-cyan

3/1/2023

onLoad only runs once

Hi all, I'm wondering if there is a more clean way to approach following scenario. I have an app with an admin user and a normal user. I pass this user to my route context. On my layout route I check my user's role to allow it to certain routes or redirect him when it lacks permissions. On logging out I set this user to undefined. This all works fine the first time the app loads. For example when I log in with the admin and log out again. Then login with the normal account I land on the admin page as the onLoad function in my layout route does not get called again, hence I don't get redirected. Why does the onload only get called once? As a temporary workaround I redirect after logging out using window.location.replace('/') this works as it forces a refresh thus forcing the onload function to run again after logging in. Is this intended behaviour or are there any other options to solve this?...

deep-jade

2/20/2023

Equivalent of useLocation?

Is there an equivalent to useLocation in react-router? I have a parent route with my nav bar and I want to highlight the current tab if the route matches. Do I need to use a dynamic route and get the segment with useParams? Or is there a way to get the pathname from the parent route and check if it matches one of the children?

statutory-emerald

2/17/2023

Route unload

Is there a way to run a code on route unload? The original react-location library supported unloader which seems to be removed in the new router. Thank you!...

ratty-blush

2/16/2023

Scroll Restoration?

How is scroll restoration handled? Currently doing it the ole fashion ugly way: ```tsx useEffect(() => { window.scrollTo(0,0)...

fascinating-indigo

2/14/2023

with-react-query example onLoad is async but not awaits or return ensureQueryData

Why with-react-query example onLoad is an async function but not awaits or even return queryClient.ensureQueryData ? On the contrary the router loader examples awaits every call. Thanks in advance,...

correct-apricot

2/14/2023

Preloading TRPC queries with @tanstack/react-query in onLoad

Whats the best way to do this, I have looked in both docs but couldn't find a good way. In the kitchen sink example it is left as a TODO

foreign-sapphire

2/11/2023

Index child route search params type issue

Consider the following scenario: - I have a documentsRoute which does have a path, but is's just an Outlet. - There's a documentRoute, which is a child of documentsRoute, which is the index (path: "/") for the parent as well - The documentRoute has a search param year, validated by zod - When using useNavigate(documentRoute.id) in the documentRoute, and using the resulting navigate function without a to, you get a type error....

foreign-sapphire

2/10/2023

How to properly type my Navbar Item Component with <Link />?

Hi, I'm trying to make a navigation item component, but am getting errors in my editor. Here is the code: ``` import { PropsWithChildren } from 'react';...

continuing-cyan

2/9/2023

Hi I'm wondering how to use two different layout routes.

For now I made a rootRoute which contains 2 layout routes layout route a and layout route b these two act as a parent route for their child routes, these layout routes are using an id as stated in the docs. This all works fine if I put them in a specific order in the routeTree in the end. If I swap layout a with layout b my index route(/ in parent b) is resolving to a nested route(interventions/$eventId) in router a . both layout routes are children from the rootRoute Is this intended behaviour?...

flat-fuchsia

2/9/2023

Lazy load entire router tree

Is there an easy way of lazy loading an entire router tree at once? i have 3 big routes which contain a lot of nested routes, my objective is when a user accesses route1, it loads all of its children routes and its components

yappiest-sapphire

2/9/2023

Parent route components unmounting and remounting when child routes change

Are parent route components expected to remount when navigating between two child routes or even the same child route with different search params? I have a situation where I have some memoization in a parent route component but because it's getting remounted when child routes change it's not working. I have a stack blitz demonstrator here: https://stackblitz.com/edit/tanstack-router-ayc4dj?file=src/main.tsx. Within the "Home" page I have two links that go the active route with different searche...

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