T
TanStack•10mo ago
harsh-harlequin

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/ 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. 🙏
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?