TanStackT
TanStack17mo ago
20 replies
endless-jade

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, ])
image.png
image.png
Was this page helpful?