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
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?
Params Route doesn't load the data when the params change
Hi all, I'm using a route with a ID params like this one
``
export const Route = createFileRoute('post/$postId')({
loader: ({ context: { queryClient }, params: { postId } }) =>
// Use the loader` option to ensure that the data is loaded...Blank page if route is not loaded yet
Hi. I got an issue in my app.
When I click on a link to navigate on a route that is not loaded, it leaves me with a blank page, and when the route is finally loaded, the page is not showing : It stay blank.
If I let the route load. I.E: by placing my cursor over a link that has preload: intent. The page shows immediatly after clicking on it, without showing any blank page....
Issue - All Routes Not Found
I followed this tutorial https://tanstack.com/router/latest/docs/framework/react/quick-start, but all routes return not-found
How do you clear search params from URL upon navigating from one page to another?
I have a page which can have search params in the URL for filtering the items on that page (things such as page and pageSize). From this page I can click on one of the items to navigate me to a totally different page under a different route path (the page im navigating to isnt a child route of the page im navigating from).
The issue is that any search params in the URL before navigating persist to the page I am navigating to.
I have tried using the useNavigate hook to navigate to the new page upon a button click and setting the search params to empty strings...
Protected routes with query
I have my API which has an auth system which uses sessions via cookies. The problem is that to check if the user is logged in, I make a request to /auth/me. I would like on my router to make a request to this endpoint (API) to check if the user is connected or not. I want to know if it is possible to do this? If not, what is the best way to check if the user is logged in?
FYI, I use Tanstack Query to do my queries....
How to show loader while auth is verifying?
Version: react-router v1.31.20
I have a route
/auth/verify which is navigated to when a user clicks on a magic link. The logic in the beforeLoad handles the magic link being clicked and verifies the user/creates a session and then redirects to the dashboard. While this is happening it shows a white page.
I would like to show a loading spinner or similar, but nothing I have tried works. Namely pendingComponent, a loader or component. ...Using <Navigate to={} /> with Layout routes?
I recently switched to file based routing and i'm having some issues using the
Navigate component with _layout routes
my tree looks like this (copied from gen, names changed)
```tsx...