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
Wildcards
Hi all
We are faced with issue with migration to react router v6 and thinking about this library
It’s possible to use wildcards/regex in paths, like it was done for RR <v6?...
Minimal router tests type error
Hi!
I want to have a minimal router for testing, but I have defined a type for router, and now this is giving me a type error.
'__store.state' are incompatible between these types.
How can I adjust my minimal router to fit the type, or adjust the type to fit my minimal router?
...
Having a Slug instead of id in the route url
Hi i wanted to know if it's possible to have a slug instead of the id in the url but get the id in the params to make some call in the loader. Something like this :
url :
in the code : ...
http://localhost:3000/topic/real-estate
http://localhost:3000/topic/real-estate
SSR Examples don't build?
```
❯ npm run build:client
frontend@0.0.0 build:client vite build src/entry-client.tsx --outDir dist/client...
Params typed incorrectly
I've seen a few discussions about this so it feels like a common error with a few different causes. Basically, if I have a route file called e.g.
routes/admin/$activityType/index.tsx, like so:
```
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/admin/$activityType/')({...Implementing something similar to Processing Accumulated Route Context for just one app
I'd like to implement something similar to https://tanstack.com/router/latest/docs/framework/react/guide/router-context using useMatches the key difference being that I don't want accumulation I just want to specify the name of the app in the parent route and have that propagate to all children
Currently however using ```ts
const matchWithTitle = useMatches().reverse().find((d) => d.routeContext.getTitle);
...
Structuring navbar code, with an exception for the login page
I'm building a simple web app to learn how to use the Tanstack Router, and want to know what would be the best approach to structure my code.
My app is supposed to always have the same menu/navbar while you're logged-in. However when you are not logged-in you should get redirected to the login page, that should NOT render the navbar.
I have the redirect part working, however I initially had all my code for the navbar in the
__root.tsx file, since I thought "oh the navbar is essentially a layout for the entire app". However, from what I understood from the documentation, the root component is always rendered, so I can't prevent it from being rendered in a specific route such as the login.
Which leads to my question: should I keep my navbar code in the root component with a condition to only render when not in the login page? Or should I keep my root component mostly empty and create a new layout for the entirety of my app, with the exception of the login page?...How to return the last page without search params?
```
// TanStack Router Import
import {useRouter} from "@tanstack/react-router"
// Ui Imports...
TypeError with Link component
I am using file based routing and I have a home page under "/home" and the following code in my navigation component:
```js
import {Link} from '@tanstack/react-router'
...
`Route.fullPath` not accessible from lazy file route?
Here is a lazy route I've defined:
```
export const Route = createLazyFileRoute('/auth/reset-password/')({
component: ResetPassword,...
Back preserving previous searchParams
I have a
/users page that has pagination ie. /users?page=2. I then have a details page at /user/<id> eg /user/7. I want to mirror the functionality of the browser and preserve that search param from the previous page with a custom "back" button on-page.
I've read the docs but can't find a clear way to do this — preferably using <Link> if possible to keep it simple....Issue with Route.useParams() in a lazy file route
Hi Everyone!
we started our project using TanstackRouter v1.19 and declared a lazy file route (as below) and we could access the route params via Route.useParams() and all was working fine.
Now in TanstackRouter v.1.34 the same code has errors and lang param is unknown...
Link params type error
I have an item component that includes an edit button that should navigate to current route + '$id'. When using the Link component and include id in params, I receive the following error:
```<Link...
Object literal may only specify known properties, and 'id' does not exist in type '(current: {} | { category: string; } | {} | { id: string; } | { id: string; } | { category: string; id: string; }) => never'.ts(2353)
Object literal may only specify known properties, and 'id' does not exist in type '(current: {} | { category: string; } | {} | { id: string; } | { id: string; } | { category: string; id: string; }) => never'.ts(2353)
Isomorphic code in loader functions w/ SSR
What is the recommended way to write isomorphic code (code for both client/server, SSR-only, etc) for loaders? i.e. if I want to read the users cookies in the loader function, or headers used for a SSR request etc?
For cookies right now I'm doing the following - would like to know how code like this is intended to be done 🙏 .
```ts
beforeLoad: () => {...
Prevent same component from unmounting between routes
I have these three routes:
*
/search/
* /search/$query
* /search/$query/$section
...How to prevent usage of client only api's on the server? (tanstack router)
Hey 🙂
I have a hook, which is initializing a
new RTCPeerConnection(). This errors on the server (obviously). How do I best handle this case? I could try to return early, if process.browser is not defined. But this will lead me to conditional hook calling....import { useLocation } from '@tanstack/react-router'
i get Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@tanstack_react-router.js?v=4d2868af' does not provide an export named 'useLocation
while it's defined in the documentation...
How to refetch queries when the data are comming from the loader
I've a route where I load some fetch some data from react-query, however if I then do a mutaion and refetch that query it doesn't re-render the data in this component, I expect that the loader is only run on mount? How should I go about this?
```tsx
export const Route = createFileRoute("/_authenticated/dashboard")({...
Navigation blocking but ignoring sibling route changes
I have a route that contains a number of child routes. I want to use the
<Block /> component to block navigation when navigating away from the parent route (to display a save warning modal). The problem is that this also blocks navigation between the child routes, which is not what I want. How do I do this? I can't find an obvious solution.
Basically, I want this behavior:
/parent/childA to /parent/childB = don't block
/parent/childA to /some-other-route = block...How do I stop search params from being automatically converted to number?
In validateSearch, a search param that's alphanumeric is coming in as a number if there are no letters in the value. Is this expected? My input validation with Valibot rejects it because of that.
I really wouldn't expect the router to do anything with the value before validateSearch runs.
For example, using URL the value is parsed as a string, not number....