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
Link active prop with param
Hello I have a problem with
activeProps prop in Link component and a route with a param. I have implemented a TabsRoute component. I have a sidebar with all the routes for example:
```ts
export const SIDEBAR_ITEMS: SidebarItem[] = [
{...Not able to build start app
```
[6:37:23 PM] ERROR [tsr-routes-manifest] Could not load tsr:routes-manifest (imported by nodemodules/.pnpm/@tanstack+start@1.43.4@opentelemetry+api@1.9.0_@types+node@20.14.9drizzle-orm@0.31.2@cloud_c3xbxkqqwnxdaj4km4r37i5kie/node_modules/@tanstack/start/dist/esm/router-manifest/index.js): Cannot read properties of undefined (reading 'map')
at Object.load (/testapp/nodemodules/.pnpm/@tanstack+start@1.43.4@opentelemetry+api@1.9.0_@types+node@20.14.9drizzle-orm@0.31.2@cloud_c3xbxkqqwnxdaj4km4r37i5kie/node_modules/@tanstack/start/dist/esm/config/index.js:284:46)
at async PluginDriver.hookFirstAndGetPlugin (/testapp/node_modules/.pnpm/rollup@4.18.0/node_modules/rollup/dist/es/shared/node-entry.js:19674:28)...
Infer routes type to a custom component
I'm making a custom component that have a Link inside, I would like to pass the
to route via props to the component, is there a type to get all the available routes in the same way the to prop of the Link does?
```
<Link to="/settings">Back</Link>
...dependant queries router loading
https://github.com/TanStack/router/discussions/922
is there any solution to this?...
Get Search Params from Localstorage before loading a page
Hello, I'd like to save last used search params in localstorage and re-set them when user go to this page again. I need it beacause it's admin panel and there're a lot of filters. Is it possible to get this data from localstorage and set proper params?
How can I use "loader" with "createLazyFileRoute"?
I have this lazy route and I'm not sure how to use the loader function:
```
export const Route = createLazyFileRoute("/(customers)/customers")({
loader: async ({ context: { queryClient } }) => {...
Router with multiple apps on same page (micro-frontends)
Hi,
We have a page with multiple micro-frontends and would like to have:
- the main/container page to manage the routing
- the micro-frontends/apps to be able to listen and update search parameters to maintain their state...
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. ...