Is there a way to not inherit the search parameters from the parent route?
I'm having some trouble in finding a strict type safe solution to my search parameters in child routes. (I am using code based routes)
The case:
I have a parent route with some search parameters:
• param1: number
• param2: number
• param3?: number
In my parent route I do some checks in which I want to redirect to either an external route outside of my app or redirect to one of my child routes.
The problem is that the optional parameter "param3" is only needed for redirecting to the external routes.
My validateSearch will accept all of these parameters however
The problem:
I don't need the optional "param3" in my child components as it has no use. So I added a validateSearch to my child route that only accepts:
• param1: number
• param2: number
Now when I want to use the hook useSearch from my childRouter it adds "param3?: number" to the typing, even though my validateSearch doesn't allow that parameter.
Is there a way to have only the child route parameters without the parent parameters included?
I know you can do:
childRoute.useSearch<typeof ChildSearchParameters>()
but I would like typescript to know this out of the box without the need to use dynamic typing every time I use the useSearch hook.
Reproducible stackblitz: Look for TODO in ChildComponent.tsx
https://stackblitz.com/edit/github-cqxxd6-3pfhf8?file=src%2FChildComponent.tsx
The case:
I have a parent route with some search parameters:
• param1: number
• param2: number
• param3?: number
In my parent route I do some checks in which I want to redirect to either an external route outside of my app or redirect to one of my child routes.
The problem is that the optional parameter "param3" is only needed for redirecting to the external routes.
My validateSearch will accept all of these parameters however
The problem:
I don't need the optional "param3" in my child components as it has no use. So I added a validateSearch to my child route that only accepts:
• param1: number
• param2: number
Now when I want to use the hook useSearch from my childRouter it adds "param3?: number" to the typing, even though my validateSearch doesn't allow that parameter.
Is there a way to have only the child route parameters without the parent parameters included?
I know you can do:
childRoute.useSearch<typeof ChildSearchParameters>()
but I would like typescript to know this out of the box without the need to use dynamic typing every time I use the useSearch hook.
Reproducible stackblitz: Look for TODO in ChildComponent.tsx
https://stackblitz.com/edit/github-cqxxd6-3pfhf8?file=src%2FChildComponent.tsx
StackBlitzKevin Leemans
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
