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
How to test a custom hook that uses tanstack router?!??
If you have a custom hook that needs some tanstack router state its really hard to test since the normal renderHooks with tanstack is not rendering correctly - at least not when testing rerenders.
We do alot of custom hooks and write simple rerender tests for them to ensure they dont do state changes between rerenders - but it seems Matches.tsx is recreating the hooks on first rerender...
I had issues create a simple test to prove it works - can someone help figure out what to do about it --> https://github.com/TanStack/router/pull/1822...
Pending matches not working as expected
I was trying out the
<MatchRoute /> component with pending flag to show a loading indicator while the router is navigating to a particular route.
I have a loader that fetches data in the route I am navigating to and based on the docs (https://tanstack.com/router/v1/docs/framework/react/guide/navigation#usematchroute-and-matchroute) I expected it to show a loading indicator while the loader was fetching but it doesn't do that.
...If I call via `useMatches` from /products/1234/a,' should each segment be returned as its own match?
When I invoke
useMatches to access all of the matches associated with my current route, should Tanstack Router return all of the routes preceding my current route as well? Say I've navigate to /products/1234/a in the browser. In the array of routes returned by TRR, should I see one for each of these path segments plus layout routes? Right now, I'm not seeing route match for /products in the array.Difference between `router.latestLocation` and `router.parseLocation()`
I noticed both of these are undocumented on RouterType
Intuitively it feels the
router.latestLocation might be more performant, but before relying on this I'd like to understand the difference....Way to determine if there is routing history within the app?
In some cases I'd like to call
router.history.back(), but I don't want it to potentially end up sending the user out of our app. So with react-router@3 we have a helper goBackWithFallback() which takes an optional URL which we navigate to in case going back would send the user out of the apps.
Is there a similar way to determine if there is routing history, and going back one step in history makes us end up in our app?...File structure for nested breadcrumbs [solved]
I have an app with 3 main routes, the
index.tsx which is exposed under the __root.tsx in the same directory level, one called organizations, and a third. On the root layout I have my shared navbar in the layout, but in the organizations route, I can dive 5 levels deeper. I am having some difficulty figuring out the file structure here for File Based Routing. On the root of the /organizations route I want to include a shared breadcrumb that is persistent on all child routes. I want the file structure to look something like this
```
__root.tsx
index.tsx
organizations...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 = () => {...
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)}`)...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....
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:
...
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?
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? ...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";...
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...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"...
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"...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....
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
...
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,...