useSearch paths includes layout routes
I have set up Code based routing where I have a couple of layout routes (using id instead of path).
When I try to use the hook useSearch the provided paths have the layout id prefixed. The useNavigateHook does not do this and works perfectly.
for example i want to access my index route this is what I want to do:
const filters = useSearch({ from: ''/weather" })
but I get a type error and it actually wants this:
const filters = useSearch({ from: '/_dashboardLayout/weather' })
The supplied picture includes my route setup or down below
const dashboardLayoutRoute = createRoute({
getParentRoute: () => rootRoute,
id: '_dashboardLayout',
component: () => {
return (
<AppLayout
siteMenu={<SiteMenu />}
userMenu={<UserMenu />}
menuItems={getCustomerMenuItems()}
menuItemsPostAdornments={(drawerOpen) => (
<>
<HelpCentreMenuItem drawerOpen={drawerOpen} />
<FeedbackMenuItem drawerOpen={drawerOpen} />
</>
)}>
<Outlet />
<SpeedDialComponent />
</AppLayout>
)
}
})
const indexRoute = createRoute({
getParentRoute: () => dashboardLayoutRoute,
path: PageRoutes.DASHBOARD,
component: DashboardPage,
validateSearch: (search: Record<string, unknown>): FiltersStore => {
return {
dateFrom: search.dateFrom
? new Date(String(search.dateFrom))
: add(extractDateWithoutTime(new Date()), { months: -1 }),
dateTo: search.dateTo
? new Date(String(search.dateTo))
: add(new Date(), { hours: 1 }),
selectedDeviceIds: search.selectedDeviceIds
? (search.selectedDeviceIds as number[])
: undefined,
showTrafficLights:
localStorage.getItem(TRAFFIC_LIGHT_SETTING) === null
? true
: localStorage.getItem(TRAFFIC_LIGHT_SETTING) === 'true'
}
}
})
const routeTree = rootRoute.addChildren([
indexRoute,
])
15 Replies
national-gold•12mo ago
When you use the second option, it works yes?
Generally, most of the hooks use the
routeId instead of the path.sunny-greenOP•12mo ago
No it doesn't work.
sunny-greenOP•12mo ago
If I use useNavigate it provides the correct paths:
national-gold•12mo ago
Could you please throw this into a stackblitz env.
It'll be easier to debug what's going on.
national-gold•12mo ago
StackBlitz
Router Quickstart Example - StackBlitz
Run official live example code for Router Quickstart, created by Tanstack on StackBlitz
sunny-greenOP•12mo ago
For sure
sunny-greenOP•12mo ago
Harrison Collins
StackBlitz
Router Quickstart Example - StackBlitz
Run official live example code for Router Quickstart, created by Tanstack on StackBlitz
national-gold•12mo ago
Your routeTree wasn't correctly setup.
https://stackblitz.com/edit/github-yrns47-ub1aky?file=src%2Fmain.tsx
Sean Cassiere
StackBlitz
Demnu 1 - StackBlitz
Run official live example code for Router Quickstart, created by Tanstack on StackBlitz
national-gold•12mo ago
One of the many reasons why we don't recommend code-based 😅
To get the kinds of type-safety being offered here, your configuration NEEDS to be verbose and done correctly.
national-gold•12mo ago
If you really don't want to use TSR file-based routing conventions, you could possible looks at the virtual file routes
https://tanstack.com/router/latest/docs/framework/react/guide/virtual-file-routes
Its our version of what Remix/React-Router is doing with their "routes.ts" file, so you don't need to use our file-based routing conventions, you can use your own.
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
sunny-greenOP•12mo ago
Sorry I'm trying to find the difference in what you did, I must be blind 😆
national-gold•12mo ago
Scroll down to the routeTree
sunny-greenOP•12mo ago
ah I see haha
Yea interesting, is there a reason why useNavigate and useSearch have different paths?
national-gold•12mo ago
Its mostly for ts-perf, some hooks need the
routeId whilst others need the routePathsunny-greenOP•12mo ago
Ah okay
well anyway thankyou for your help! I'll look into virtual file routes.