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

useSearch

line, then comment the next line it:

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

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

Thank you

StackBlitzRodkot

Router Quickstart File Based Example (forked) - StackBlitz

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

TanStack•16mo ago•

27 replies

rubber-blue

Use « useSearch » in the root page

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

useSearch

line, then comment the next line it:

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

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

Thank you

StackBlitzRodkot

Router Quickstart File Based Example (forked) - StackBlitz

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

Use « useSearch » in the root page

Similar Threads

Use « useSearch » in the root page

Similar Threads

Similar Threads

Similar Threads