wise-white

Search params from layout

Hi, reading search parmas from root route (layout) works

    const navigate = useNavigate({ from: "__root__" });
    const search = useSearch({ from: "__root__" });

    const navigate = useNavigate({ from: "__root__" });
    const search = useSearch({ from: "__root__" });

But when i try to set search params from a component rendered in this root like sidenav then from __root__ is not a valid type it only accepts routes. How to navigate from layouts?

12 Replies

metropolitan-bronze•5mo ago

please provide a complete minimal example, e.g. by forking one of the existing stackblitz router examples

wise-whiteOP•5mo ago

@Manuel Schiller https://stackblitz.com/edit/tanstack-router-vonreznv?file=src%2Froutes%2F__root.tsx here u go so nav.tsx how can u use useNavigate here? u don't know from what route u will call it becuase its a layout

metropolitan-bronze•5mo ago

from needs to be a path for useNavigate so just use '/' or dont specify anything not required btw don't use __root__ directly, use

import { rootRouteId } from '@tanstack/react-router';

import { rootRouteId } from '@tanstack/react-router';

its an internal detail that could change

wise-whiteOP•5mo ago

okey but if u dont pass anything to navigate and in this case i can't pass '/' becuase u can call this from any rooute then

  const navigate = useNavigate();
  const search = useSearch({ from: '__root__' });

  navigate({
    search: {
      open: true
    }
  })

  const navigate = useNavigate();
  const search = useSearch({ from: '__root__' });

  navigate({
    search: {
      open: true
    }
  })

this is type error navigate is fully untyped and doesnt accept what it should meaning Record<string, string | string[]> or something like this

metropolitan-bronze•5mo ago

add a to: '.'

wise-whiteOP•5mo ago

okey now works

metropolitan-bronze•5mo ago

see also the docs

metropolitan-bronze•5mo ago

https://tanstack.com/router/latest/docs/framework/react/guide/search-params#link-search-

Search Params | TanStack Router React Docs

Similar to how TanStack Query made handling server-state in your React and Solid applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications. 🧠 If you ar...

metropolitan-bronze•5mo ago

link and useNavigate have the same underlying api

wise-whiteOP•5mo ago

yeah i know link search but this is just minimal repro in my case i need buttons thanks tho

metropolitan-bronze•5mo ago

what I was hinting at is this

metropolitan-bronze•5mo ago

it's all documented

Gaming

Programming

Search params from layout

Did you find this page helpful?