faint-white

Can't Use `useSearch` in Reusable Component Across Multiple Routes

I'm having trouble using useSearch in a reusable component when working with multiple routes in a TanStack Router project. Here's a breakdown of the issue:

Code Example

The Reusable Component:

import { useSearch } from "@tanstack/react-router";

export const Pagination = ({ totalPages }: { totalPages: number }) => {
    const { page } = useSearch({ from: "/_protected/testing/" });

    const navigateToPage = (page: number) => {
        // .................
        // .................
        // .................
        // .................
    };

    return (
        <div>
            <button disabled={page <= 1} onClick={() => navigateToPage(page - 1)}>
                Previous
            </button>
            <span>
                Page {page} of {totalPages}
            </span>
            <button disabled={page >= totalPages} onClick={() => navigateToPage(page + 1)}>
                Next
            </button>
        </div>
    );
};

import { useSearch } from "@tanstack/react-router";

export const Pagination = ({ totalPages }: { totalPages: number }) => {
    const { page } = useSearch({ from: "/_protected/testing/" });

    const navigateToPage = (page: number) => {
        // .................
        // .................
        // .................
        // .................
    };

    return (
        <div>
            <button disabled={page <= 1} onClick={() => navigateToPage(page - 1)}>
                Previous
            </button>
            <span>
                Page {page} of {totalPages}
            </span>
            <button disabled={page >= totalPages} onClick={() => navigateToPage(page + 1)}>
                Next
            </button>
        </div>
    );
};

The Route:

import { createFileRoute } from "@tanstack/react-router";
import { zodSearchValidator } from "@tanstack/router-zod-adapter";
import { z } from "zod";

export const Route = createFileRoute("/_protected/testing/")({
    component: () => <div>Hello /_protected/testing/!</div>,
    validateSearch: zodSearchValidator(z.object({ page: z.number().default(1) })),
});

import { createFileRoute } from "@tanstack/react-router";
import { zodSearchValidator } from "@tanstack/router-zod-adapter";
import { z } from "zod";

export const Route = createFileRoute("/_protected/testing/")({
    component: () => <div>Hello /_protected/testing/!</div>,
    validateSearch: zodSearchValidator(z.object({ page: z.number().default(1) })),
});

The Problem:

When I use this setup, I encounter the following error:

Invariant failed: Could not find an active match from "/_protected/testing/"

Invariant failed: Could not find an active match from "/_protected/testing/"

It seems that the useSearch hook cannot find the route

/ _protected/testing/

/ _protected/testing/

in this context. This makes the Pagination component unusable across multiple routes.

What I Expect:

The Pagination component should work seamlessly with different routes, as long as the search params for that route are properly validated and accessible.

Questions:

1. Is this the intended behavior for useSearch with the from option?
2. If so, what's the best practice for creating reusable components like Pagination that rely on route-specific search params?
3. Is there a workaround to dynamically determine the current route or make this reusable component work with multiple routes without duplicating code?

Any insights, suggestions, or alternative patterns would be greatly appreciated! Thanks in advance.

TanStack•16mo ago

faint-white

Can't Use `useSearch` in Reusable Component Across Multiple Routes

I'm having trouble using useSearch in a reusable component when working with multiple routes in a TanStack Router project. Here's a breakdown of the issue:

Code Example

The Reusable Component:

import { useSearch } from "@tanstack/react-router";

export const Pagination = ({ totalPages }: { totalPages: number }) => {
    const { page } = useSearch({ from: "/_protected/testing/" });

    const navigateToPage = (page: number) => {
        // .................
        // .................
        // .................
        // .................
    };

    return (
        <div>
            <button disabled={page <= 1} onClick={() => navigateToPage(page - 1)}>
                Previous
            </button>
            <span>
                Page {page} of {totalPages}
            </span>
            <button disabled={page >= totalPages} onClick={() => navigateToPage(page + 1)}>
                Next
            </button>
        </div>
    );
};

import { useSearch } from "@tanstack/react-router";

export const Pagination = ({ totalPages }: { totalPages: number }) => {
    const { page } = useSearch({ from: "/_protected/testing/" });

    const navigateToPage = (page: number) => {
        // .................
        // .................
        // .................
        // .................
    };

    return (
        <div>
            <button disabled={page <= 1} onClick={() => navigateToPage(page - 1)}>
                Previous
            </button>
            <span>
                Page {page} of {totalPages}
            </span>
            <button disabled={page >= totalPages} onClick={() => navigateToPage(page + 1)}>
                Next
            </button>
        </div>
    );
};

The Route:

import { createFileRoute } from "@tanstack/react-router";
import { zodSearchValidator } from "@tanstack/router-zod-adapter";
import { z } from "zod";

export const Route = createFileRoute("/_protected/testing/")({
    component: () => <div>Hello /_protected/testing/!</div>,
    validateSearch: zodSearchValidator(z.object({ page: z.number().default(1) })),
});

import { createFileRoute } from "@tanstack/react-router";
import { zodSearchValidator } from "@tanstack/router-zod-adapter";
import { z } from "zod";

export const Route = createFileRoute("/_protected/testing/")({
    component: () => <div>Hello /_protected/testing/!</div>,
    validateSearch: zodSearchValidator(z.object({ page: z.number().default(1) })),
});

The Problem:

When I use this setup, I encounter the following error:

Invariant failed: Could not find an active match from "/_protected/testing/"

Invariant failed: Could not find an active match from "/_protected/testing/"

It seems that the useSearch hook cannot find the route

/ _protected/testing/

/ _protected/testing/

in this context. This makes the Pagination component unusable across multiple routes.

What I Expect:

The Pagination component should work seamlessly with different routes, as long as the search params for that route are properly validated and accessible.

Can't Use `useSearch` in Reusable Component Across Multiple Routes

Code Example

The Problem:

What I Expect:

Questions:

Can't Use `useSearch` in Reusable Component Across Multiple Routes

Code Example

The Problem:

What I Expect:

Questions:

Similar Threads

Similar Threads

Similar Threads