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
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) {...
Do layouts work in router folder groups?
Should this be working as expected? Or have I done something wrong
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
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';...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. ...Possible to escape parent nesting inside a folder?
I have this example folder structure:
```
routes
- library
route.tsx...
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...
beforeload with async does not seem to wait or creates infinite rerenders
I create a minimal reproduce ... its the context.hasAccessTo that tries to wait for result but dont get anywhere...
https://stackblitz.com/edit/vitejs-vite-uw5gth?file=src%2FApp.tsx
I have an app with 156 routes - upgrading from "1.31.6" --> "1.36.3" this ends up with infinte rerender issue ... is it known issue? are there any workarounds?...
Transforming backend filters in the loader to frontend params.
In my application we have just started using the TanStack router for the dashboard page. Each dashboard has a set of filters stored in the backend. When i load this route i would like to set these params in the loader of the createRoute so that they are exposed to the page component. How can i do this? (the filters are in the response of the dashboard query)
```tsx
const baseRoute = createRoute({
getParentRoute: () => rootRoute,...
Any plugins for rspack or webpack support?
Hi - we are currently checking out this cool looking router ❤️
We are currently considering it for the PlatformPlatform project but we are on rspack - any official plugins or is the cli devtool the way to go?
Thank you 🙂
...
redirect in beforeLoad/loader causes infinite loop
I have a layout
_authed,
```
export const Route = createFileRoute("/_authed")({
component: LayoutComponent,
beforeLoad: async ({ context: { queryClient } }) => {...[FIXED] Prevent Router's loader to rerun when the hash changes
How can i prevent a loader to rerun whenever i change the url's hash?
```typescript
{settingsMenu.map((menu) => (
<Button...
Easiest way to make the possible routes/paths accessible when browsing it directly
First things first Im a newbie on building websites in general and I know that this can be a Vite question (but Im not so sure). Also I know this is a very Googleable question but I have no idea on what to search, so feel free to provide me some terminology on this.
Basically I want to make my route domain.com/user accessible without necessarily navigating to the domain.com before to manually go to the /user route. Of course, on development build works fine but not in prod, probably because of some config that Im missing. Am i able to trivially achieve this using tanstack router / vite ?...
Automatically generate file routes on save
Hi newbie here, im really enjoying tanstack router but if i create a new file route, i always rebuild my program with npm run dev so that the routeTree updates properly. is there a way to generate routes automatically on save?
Navigate to an external url prob
Hello, I'm encountering this problem while trying to redirect the user to an external URL in the loader function.
This is my logic:
Fetching products.
If the returned list is empty, I will redirect the user to the external URL.
I've tried using "throw redirect/navigate," but it hasn't worked....
loaderDeps / loader function race condition.
I have noticed, this issue in Tanstack router whereby the loader function within the router gets called first, before loaderDeps is executed.
As a result, few of the values in loaderDeps are undefined. However upon dropping console logs I can see loaderDeps gets search params later on, but at this point loader is never re-executed. How do we get loader to re-execute when loaderDeps changes ?
```ts
export const Route = createFileRoute('/some/desination/route')({...
Sync router with other router (ex vue router) for a micro-frontend setup
I was wondering if anybody already did a similar thing or has suggestions how we could sync our tanstack-router with another router for example the vue router.
We have a micro-frontend setup using module federation where our old code is still written in Vue.js and we are gradually converting pieces off the application to React.js.
ex: We have a container app in React.js that handles authentication etc and then we've split up our application into separated pieces (child apps):
- sub app: file browser (vue.js)
- sub app: addressbook (vue.js)...
Dynamic breadcrumbs
I have a project route (
/projects/123) which can be navigated to from 2 different routes (/projects and /customers/456). Depending on the route I have come from, the breadcrumbs in the project route should show the correct previous route.
Is there a standard for how to implement this? If I store it in a context, then what happens when someone refreshes the page? If I use localstaorage instead, there could be multiple tabs to track which can make it a bit more complicated.
I just want to make sure I am doing everything right from the start with tanstack router. I need this for the project route today but what if I need it for some other route in the future? How should I be configuring things?...Does it make sense to start with Tanstack Router for electron.js app
I am familiar with next.js, vue3 and react.
I have an App written with next.js that I want to port to the desktop with electron.js.
Does it make sense to use Tanstack Router instead of next.js. If I stay with react I should be able to use all the present components as I did not use many next.js native hooks or anything like that.
I am asking because I heard that next.js and electron.js are not working together really well.
...
Weird errors (only in production) with following structure
I have the following routes:
- /player/$playerId/info
- /player/$playerId/events
- /player/$playerId/economy...