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

flat-fuchsia

6/21/2024

Is there an option to lazy-load a group of routes in one chunk?

In react-router-dom (not data-router, but in the old one) it could be done somewhat like this: ```typescript // pages/SubRoutes.tsx export const SubRoutes: FC = () => {...

other-emerald

6/21/2024

Unable to navigate using relative links

I'm running into an issue where I can't seem to navigate to a specific page from another page using relative links. This is my react component:

``
function DeviceLink({ id, name }: DeviceLinkProps) {
  const location = useLocation()
  console.log(

Location: ${JSON.stringify(location)}`)...

like-gold

6/21/2024

Generated tree file isnt being built with Vite

Im running into this issue where the route tree cant be build with Vite and Rollup. Have anyone else run into this issue? From the output it seems like the file isnt being compiled to js ```log vite v5.3.0 building for production... ✓ 4 modules transformed....

inland-turquoise

6/19/2024

Is there a hook to access router context ?

I followed the guide for React Context: https://tanstack.com/router/latest/docs/framework/react/guide/router-context#router-context I would like to access the context from a component like this: ...

dependent-tan

6/19/2024

Lazy file routes don't have the same config as regular file routes?

Most of the configuration options for a route are gone in lazy file route. Why do we have to trade these features when code splitting?

sunny-green

6/19/2024

Blocker does not guard browser back like react-router

Loving the way the router works ❤️ We are currently migrating from react-router and has the mentioned issue since we need to guard the back button (crucial for us). (Works in react router) I was just wondering what the difference between how react-router is since there it works as one might expect there? ...

xenial-black

6/19/2024

React Router does not render redirected route after query error

I am using @tanstack/react-router and @tanstack/react-query in my React application. I have set up a QueryClient to handle errors and redirect to a login page if a 401 Unauthorized error occurs. However, after the redirection, the URL changes to /login but the content does not update to show the login page until I manually interact with the page (e.g., clicking a link). ``` import { StrictMode } from "react"; import ReactDOM from "react-dom/client";...

wise-white

6/19/2024

beforeLoad / validateSearch compatibility issue?

I'm wondering if it's intentional that when utilizing code-based routing, if one attempts to utilize any parameters provided to beforeLoad (e.g. context) that the type of search parameters provided via inference validateSearch is dropped in consumers utilizing useSearch? If not, how might one leverage beforeLoad with provided parameters without losing the type inference for search parameters on the same route? Minimal Repro: https://stackblitz.com/edit/tanstack-router-nrzryj?file=src%2Fmain.tsx...

dependent-tan

6/18/2024

Bug: Never ending "pending" state when notFound is thrown from a splat route

Steps to reproduce 1. Go to the /browse/album/123 URL in StackBlitz Expected result A "Not found message"...

dependent-tan

6/18/2024

Bug: `throw notFound()` in `beforeLoad()` when preloading instantly shows the error

I don't even need to click the link, as soon as I hover over it, I get the "Not found" error message? Repro steps: 1. Go to /browse 2. Hover over "Browse 404"...

fascinating-indigo

6/18/2024

How to hide network request?

I've a react application with react-router. I'm sending some network requests and I'm trying to hide the request for the client and only expose the returned data, but how should I do that? I've tried to go through this example https://github.com/TanStack/router/tree/main/examples/react/basic-ssr-file-based but the request is still exposed to the client....

dependent-tan

6/17/2024

Getting the type for the "to" prop

Edit: Workaround I worked around this by explicitly defining the route options. I'm a bit puzzled why this works, since the exported NavigateOptions generic TRouter param defaults to RegisteredRouter, but somehow it doesn't get inferred in certain instances. Note that this is only necessary when using TS 5.5 ...

exotic-emerald

6/17/2024

What would cause the `loader` to be called without `context`?

I destructure the context parameter in the loader function of my route, but randomly, it sometimes throws the error (destructured parameter).context is undefined. Refreshing the page fixes the issue, but I am not sure why the issue is happening in the first place. My beforeLoad method always returns a value (unless the user isn't authenticated, in which case it throws a redirect, but that is not happening here), so from what I can tell, context should never be undefined... ```tsx export const Route = createFileRoute('/orders/search')({ validateSearch: orderSearchParamsSchema,...

rising-crimson

6/17/2024

OAuth login flow with TanStack router

I'm trying to implement OAuth and I want to understand the correct pattern/how to approach this in the context of the router. I have an AuthProvider component wrapping the router: ```js function InnerApp({ router }: AppProps) {...

probable-pink

6/16/2024

Do layouts work in router folder groups?

Should this be working as expected? Or have I done something wrong

optimistic-gold

6/16/2024

Pathless layout with standard layout

Hi there! I'm new to TSR and a bit puzzled by the routing syntax compared to simpler ones like in Astro. Basically, I want to achieve this:

/auth/register
/auth/login

/auth/register
/auth/login

...

national-gold

6/16/2024

Navigate should use input type params not output type params.

Looks like there's not a way to control the input type of search params. calls to navigate still require search params even if they are marked as optional and resolved with default or catch. Unless I'm missing something. Stackblitz with example: https://stackblitz.com/edit/tanstack-router-vkzaga?file=src%2Froutes%2Fposts.tsx ```typescript import * as React from 'react'; import { createFileRoute, Link, Outlet } from '@tanstack/react-router';...

dependent-tan

6/15/2024

Best practice for route alias?

We have two routes that show the exact same content but their paths will differ, e.g. /playlists/$playlistId /library/$playlistId Is there any best practice to have minimal boilerplate to make this happen? Right now I've defined a PlaylistView component in routes/-shared/PlaylistView.tsx which also exports a re-usable "route config" object for the loader. ...

dependent-tan

6/15/2024

Possible to escape parent nesting inside a folder?

I have this example folder structure: ``` routes - library route.tsx...

other-emerald

6/14/2024

Lazy file route use cases

When should I create a lazy file route as opposed to a regular non-lazy route? All of the examples in the documentation use non-lazy file routes. I was wondering when I would need to use lazy file routes...

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