sunny-green

Use « useSearch » in the root page

Hello ! Why it is not possible to use the hook useSearch in the root page when the matched page is not “/“ Here is an example: https://stackblitz.com/edit/github-qwwxnn-h4ayk7?file=src%2Fpages%2Findex.tsx

import * as React from 'react';
import { createFileRoute, useSearch } from '@tanstack/react-router';

export default function IndexPage({ children }: { children: React.ReactNode }) {
  // const search = useSearch({ from: '/' });
  const search = {};

  return (
    <div className="p-2">
      <h3>Welcome to IndexPage!</h3>

      <div className="p-2"> IndexPage search {JSON.stringify(search)}</div>

      {children}
    </div>
  );
}

import * as React from 'react';
import { createFileRoute, useSearch } from '@tanstack/react-router';

export default function IndexPage({ children }: { children: React.ReactNode }) {
  // const search = useSearch({ from: '/' });
  const search = {};

  return (
    <div className="p-2">
      <h3>Welcome to IndexPage!</h3>

      <div className="p-2"> IndexPage search {JSON.stringify(search)}</div>

      {children}
    </div>
  );
}

To reproduce the bug, uncomment the useSearch line, then comment the next line it:

const search = useSearch({ from: '/' });
// const search = {};

const search = useSearch({ from: '/' });
// const search = {};

Thank you

Rodkot

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

14 Replies

rival-black•10mo ago

what do you mean by "it is not possible"? do you get an error?

sunny-greenOP•10mo ago

Yes

rival-black•10mo ago

i don't get the error

rival-black•10mo ago

https://stackblitz.com/edit/github-qwwxnn-c2rhmz?file=src%2Fpages%2Findex.tsx

Manuel Schiller

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

sunny-greenOP•10mo ago

rival-black•10mo ago

you did not mention that something needs to be clicked

sunny-greenOP•10mo ago

My bad

rival-black•10mo ago

however, the "index.tsx" route is not an active match when "test.tsx" is rendered so when you are on /test, you still render IndexPage this tries to look for a match with id / but this does not exist at this moment if you want to have "global" search params, you would need place them into the root route and then access them e.g. via

  const search = useSearch({ from: rootRouteId });

  const search = useSearch({ from: rootRouteId });

however since search params are inherited, you can just use any from really if the search params live in the root route

sunny-greenOP•10mo ago

the index page is of course render through the root route. https://stackblitz.com/edit/github-qwwxnn-c2rhmz?file=src%2Froutes%2F__root.tsx

Manuel Schiller

StackBlitz

Router Quickstart File Based Example (forked) - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

rival-black•10mo ago

yes but the index route is not "rendered" when you are on /test it is only an active match when you are on /

sunny-greenOP•10mo ago

In this example

const search = useSearch({ from: rootRouteId });

const search = useSearch({ from: rootRouteId });

the rootRouteId is not / ?

rival-black•10mo ago

no it is the real root of the whole route tree whereas / is the id of the route that is rendered when "no path" or just / is accessed the reason those two are separate IDs is that you might want to have e.g. some search params on the index route but not on the root route

sunny-greenOP•10mo ago

Thank you so much, Use rootRouteId instead of / resolve my issue. Do you think we have that information in the documentation ?

rival-black•10mo ago

not sure. however as I wrote above, if you put the search params in the root route they are inherited on all routes so you can just use the current route to access the params or use strict: false

Gaming

Programming

Use « useSearch » in the root page

Did you find this page helpful?