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
Example repo with vite, react, tanstack router and an api in express js
Anyone come across a good example repo to get me going quickly?
Cannot find module '@tanstack/router-plugin/vite' or its corresponding type declarations.
I'm getting this
tsc error in my vite.config.ts file. Routing itself works fine, but the error is annoying and I'm wondering if I've missed a step somewhere.
My package.json has:
```
"@tanstack/react-router": "^1.40.0",...Pending Component not working properly!
After trying things out looks like if i make the load function async it works! And renders the pending component:
```
loader: async ({ context }) => {
console.log("waiting...", context);
await sleep(5000);...
Implement AuthWrapper in filebased routing
How do I implemement the following code in my filebased router?
```js
import { createReactRouter, createRouteConfig } from '@tanstack/react-router';
import { AuthWrapper } from '../components/AuthWrapper';...
Double navigation
Is there a way to navigate twice. I want to navigate to a route quickly to add it to the history and then instantly navigate to the target. This worked in
react-router-dom, but now the only way i can manage to get it working is leaving a dangling timeout with wait 0.
Any ideas why this does not work or how i can fix it?...How to pass props to Layout Routes and redirection.
So I have a route where the sidebar and top bar ar the layout routes created using _notation and Outlet component.
Now my both layout components are using a useUserSession Hook where that hook uses Tanstack Query to get the session.
The problem is now I have to call that hook 2 times which is not a problem but unnecessary. And also I can't redirect from the component directly using the use navigate when an error is triggered while rendering this layout component....
Handle session expiry
Hi, is it correct to state that the authentication example cannot handle expired sessions?
From what I can tell, the _auth layout route is triggered when navigating to an auth route, but not when switching between auth routes.
Meaning that if a server session expires, these will not be detected, except if the authGuard is set for every authenticated route?
...
Route matching under multiple layout with file based is not under a parent route
Hello,
I have a quick question but I did not find the answer in the docs.
We are using file base routing with multiple layout that are nested, and routes likes ...
Authenticated routes are showing after a logout on the first navigation back to it
Hi guys, I recently started using tanstack-router and I've only encountered a small issue. I have a protected route, and the thing is that when I execute a logout and immediately navigate back to the route, the screen remains empty. Even in the developer tools, I can see the entire page đ§. If I navigate back, the problem is solved, but it's not ideal đ
. I must clarify that I am using route.invalidate() which I thought was what I was missing, but no âšī¸. Any help would be greatly appreciated. Th...
custom link with createLink doesnt render the Link component
I'm trying to create a custom Link wrapper.
```
import { createLink } from "@tanstack/react-router";
import { FC, ReactNode } from "react";
...
Route files keep resetting
Hi Guys,
We've recently started using Tanstack Router in our new project, however there is this really annoying thing that keeps happening.
Sometimes when renaming a file, the contents of the file get reset to the default route file template.
...
File-based router open dialog in parent route
Hi, I'm trying to popup a dialog(/example/new) while keeping the parent content(/example) in the background, and I placed a <Outlet /> in the index.lazy.tsx,
but it not working, it just render the /example/new 's content.
What should I change to do so?
Here is my router file structure...
Redirecting in 'beforeLoad' to change one parameter in the URL
I'm trying to ensure that URLs in the address bar are always in the users current language.
For context, as an example, lets say I have in my CMS a model for an article and it has a translatable 'slug' parameter and content. What I want to do is if a user lands on
/blog/article/hola to redirect to /blog/article/hello when in English.
So far I have managed this with the beforeLoad function on the route and throwing redirect() with my new route. ...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...