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
Invalid use of Link component or bug?
```ts
<Link
className="font-bold hover:underline hover:cursor-pointer"
to="/users/$id"
params={matchingUser}...
meta tags
I see there is a
meta property when defining the Route, but it doesn't do anything. Is this still experimental and is there a way to use it in SPA (I've seen tanstack.com gh repo uses it, but that has SSR)Path Params in Middle Of Route?
Can a path param be used like so: /route1/$var/add
parseParams returns type error: Property '$var' does not exist on type 'Record<never, string>'.ts(2339)
or should I be using a different route structure? My use case is four tabs used to filter a table by the $var value and provide CRUD functions for each. They use the same database table but different form fields with some overlapping fields....
createFileRoute question
Hi,
I'm using file based routing and wonder why a path is required to the
createFileRoute method?
It doesn't seem to matter what I specify as path. For example, if I set it to '/' (which is a valid path) on all my createFileRoute, the app works just fine. I can't specify anything though, it has to be some of my valid paths to not get type(script) error though....useRouteContext initially undefined
Hi,
I have a custom ssr project.
I'm using the useRouterContext in my react component and observing the following. ...
Freeze Outlet for page animations
How can I freeze what the Outlet is rendering? This is useful for animating between pages with libraries like react-spring
Sharing Query between Routes
How should I be sharing Tanstack Query data between children routes? I'm a bit confused on when to use context provider vs accessing context or just using Tanstack Query directly in component.
For example, I have a route /_cash-flow with sub routes (tabs) /_cash-flow/typeA, /_cash-flow/type2A, etc.
I use a loader in /_cash-flow to import 'cash-flow' table data for user and /typeA is a filter on that data, so each 'type' page provides a CRUD interface for just that table data filtered on 'typeA' like /typeA/add or /typeA/$id
...
Can't get protected routes to work
I'm not sure what I'm doing wrong her but I cannot seem to figure out how I can create a protected route.
I'm tryint to make a protected route
/authenticated/dashboard. but no matter what does_authenticated.tsx not get triggered and redirect the client to /login ?
```
āāā index.html...get the element that <Outlet/> is rendering
In react router, there was a useOutlet hook which provided the element that the <Outlet/> was rendering at that route level. How can I do it in TanStack Router??
Can I listen to unload of a page and conditionally prevent navigation?
I can't find it in the docs, I'd like to know if router currently supports something to show the "you have unsaved data" popup when navigating away from a page (either from navigation or closing the browser window)
Routing Integration Issue Between React Router and Tanstack Router in MFE
Description:
I am encountering a problem when integrating a Micro Frontend (MFE) that uses Tanstack Router into a legacy project that uses React Router. I set up a base path in the legacy project with React Router (/invoices) and expected the MFE to start from this base path. However, the MFE is still being rendered at the root path (/) of the legacy project, instead of using the configured base path.
Context:
...
getRouteApi usage
is there an example on when to use the getRouteApi function? From what I understand, it's useful for when you want to access route's data, but the component/hook isn't in the same file as the Route definition.
Since getRouteApi() is called outside components, is it a good idea to group calls of this function for all the routes in my project in one file in the root of my project and then just use the returned values in the application for easier management?...
Is there a way to use hooks in loader function?
I have set up an useAxios hook for bearer token, however I am unable to use that in loader functions, is there a workaround for this?
For now, I have saved the token in router context, and I am passing that to a custom fetcher to avoid sending auth header explicitly for every request....
createLazyFileRoute or createFileRoute
Should i use createLazyFileRoute or createFileRoute, what is the difference?
Is there a way to "name/title" a route?
Was about to create a breadcrumb and using "useMatches" to get the route tree. It would be nice to be able to give the route a "title" that I could use in "useMatches" to build the breadcrumb. Is this possible?
Mocking
Hey there,
I was wondering how can i mock the Link component when running tests ?
To see that the user is navigating to a page within my tests.
...
How to make search params optional and rely on zod .catch() for default ?
Hello !
When defining routes we can use validateSearch combined with zod schemas in order to type the route search, however this schema cannot be undefined and while we can set defaults with catch(), we are still required to provide said search params when navigating with Link or navigate() and it is a bit tedious
Is there a clean approach to make search params optionnal for navigation ?
...
How do I render a Default (root level) Not Found Component within a layout.
Hi,
I would like to render all notFound components within a layout. Is there a simple way to achieve this?
I am using file routing, vite, react and typescript....
Has anyone integrated sentry with router?
I'm searching for something like sentry integration for react router but for the TanStack router, has anyone done some integration?