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
Is it advisable to make heavy use of SearchParams?
hey 👋🏽
It is tempting to handle a complete filter state in the address bar. Then the history works and it's a great user experience, but is it really advisable to handle a large filter state with the help of the SearchParams. I mean a pagination-filter with about 10 filter values, which also consist of complex types. Isn't it possible that you reach limits? Thanks...
It is tempting to handle a complete filter state in the address bar. Then the history works and it's a great user experience, but is it really advisable to handle a large filter state with the help of the SearchParams. I mean a pagination-filter with about 10 filter values, which also consist of complex types. Isn't it possible that you reach limits? Thanks...
How to check if it's possible to go back
I'm aware you can go back with history.back(), but I would like to know if I can go back in the first place because I want to close my app when I can't go back anymore with gestures for example, is there a way to check if router can go back ?
Testing Tanstack Router Components
Hello I'm using tanstack router and I'm trying write some tests using vitest for my components.
I have a component that has a useNavigate and I'd like to test that clicking a button, triggers a navigate() call with the correct to parameter.
My first challenge is getting the component to render at all, I have introduced act() , but it doesn't seem 100% reliable when used together with @testing-library/jest-dom/vitest , as running the test by itself it succeeds, but running the entire test suite it sometimes fails.
...
Massive TypeScript performance issues
We have an app that I would consider quite small with about 20 routes of which about 10 are top level routes. Type checking (
tsc --no-emit) with the router type registered takes about 2-3 minutes on my Macbook Pro. Without it, it takes 14 seconds. The TypeScript language service becomes unusable, error feedback in a file in VSCode turn from instantly after an edit to taking about 30 seconds.
I already tried adding type aliases to typeof router, explicitly annotating validateSearch functions, extracting routes into their own files. These seem to be tips from the TypeScript documentation, but they don't help.
I am also getting error messages about type instantiation:...Browser navigation question.
Hello 👋
When I use the browser's navigation buttons (next/previous) the url changes correctly but the interface doesn't refresh except when I go to a catch-all route (path: "*").
I'm using router version 0.0.1-beta.198 and I've tried to simplify my routes as much as possible and I still have the same problem....
Another circular dependency question
I've read through all the questions and answers about circular dependencies between router, the route tree, Routes and beforeLoad. Our app does work with the circular dependencies but they are breaking unit tests. Redirecting in
beforeLoad with throw redirect only solves half the problem. Most of the time we need router.history.location.pathname, router.history.location.search, etc for the redirects. Even https://tanstack.com/router/v1/docs/guide/authenticated-routes#redirecting is using...Protected Routes with auth state in redux
The authenticated routes documentation (https://tanstack.com/router/v1/docs/guide/authenticated-routes) show using
beforeLoad like so:
```
const authenticatedRoute = new Route({
id: 'authenticated',...How to keep navigation state in sync with active route?
Hi
I am using the antD Menu component for my navigation together with Tanstack Router. It works when you click the navigation but if you open the site already with a specific link, it does not work, since the antd menu state is not in sync with the active route. The only solution I found was to use
const currentPath = router.state.matches[router.state.matches.length - 1].pathname; to set my initial state manually, so that it is in sync. Here you find my simple example on CodeSandbox: https://codesandbox.io/s/antd-menu-tanstack-router-ddns67 you can test the behavior by going for example to https://ddns67.csb.app/about (without setting the currentPath to state, this will not work)
What would be the right approach to use a Menu component together with TanStackRouter?...Usage with module federation
I'm currently exploring using this library to replace react-router in my organizations primary web application, which is actually a series of React clients that are brought together with in an App Shell via module federation to provide a seamless SPA experience while allowing for multiple projects to be maintain and deployed independently. Looking at the docs for this project, I get the sense that the entire route tree wold have to be statically defined across all the entire series of applicatio...
Force remount on route change
Can components be forced to re-mount when the URL changes?
In the Basic example, the blog post component stays mounted but gets new props on navigation. This is undesirable in some cases to prevent race conditions.
Usually you can do something like...
Link wrapper requires params
I am using a wrapper around Link from Mantine called NavLink.
typescript complains that it is missing the
<NavLink component={Link} to={myroute.to} />
<NavLink component={Link} to={myroute.to} />
params property......Child path not rendering
```typescript
const root = new RootRoute({component: Root});
const index = new Route({
getParentRoute: () => root,
path: '/',...
Getting breadcrumbs
Hi I am new to this library, I want to display breadcrumbs in my app in a component. On my route
/projects/$projectID I want to get the array ["projects", "theID"] so I can render the breadcrumbs. What is the best approach for this? I've been looking at useRouter and useMatches but they give me a lot of information I do not need and I need to do a lot of manipulation to the output of this.
I was looking into this: https://tanstack.com/router/v1/docs/guide/router-context#processing-accumulated-route-context but routeContext is missing for all the matches, what am I doing wrong?...Releative routes with params. All params mandantory?
I have the following route:
/customers/$customersId/participants/$participantsId
My definition for the Participant is as follows:...
Support for libraries other than React
The title of tanstack.com/router is: 'TanStack Router | React Router, Solid Router, Svelte Router, Vue Router'
And the GitHub page states: 'Fully typesafe Router for React (and friends)...'
Is there any current support for libraries other than React (specifically Vue in my case)? Or is this support you intend to add in the future? Or is it the case that
core can easily be extended by someone who wishes to uses it for their framework of choice....Using Router in multiple projects within a monorepo
Got a question about using Router in a monorepo.
This question is purely out of curiosity, not a problem I'm facing. My question is entirely from the development aspect because I'm assuming you are passing callbacks or not trying to create router-reliant internal packages.
From what I understand, your existing build processes should work fine since you'd be building/compiling the individual application within its own directory....
How to handle meta/head tags ?
How should I change my meta tags/page title and so on with this package ? Is this handled by tanstack router or should I use another package to achieve this ?
Passing QueryClient but still getting `No QueryClient set, use QueryClientProvider to set one
```export default function MainLayout({ children }: { children: React.ReactNode }) {
const { state, send } = useAuth();
useEffect(() => {
console.log(state.context);...