Search params بأنواع · مذكرات سعيد

بدل ما تقرأ الـ query string كنص، تعرّف شكلها. Zod شائع هنا. ثبّته وراجع أمر التثبيت في الدوكس.

src/routes/posts/index.tsx

import { createFileRoute } from "@tanstack/react-router";import { z } from "zod";const postsSearchSchema = z.object({  page: z.number().catch(1),  filter: z.string().catch(""),});export const Route = createFileRoute("/posts/")({  validateSearch: postsSearchSchema,  component: PostsIndex,});function PostsIndex() {  const { page, filter } = Route.useSearch();  return (    <div>      <p>الصفحة: {page}</p>      <p>الفلتر: {filter || "مفيش"}</p>    </div>  );}

catch لو القيمة ناقصة أو نوعها غلط: الصفحة تبقى ١، والفلتر نص فاضي. Route.useSearch يرجّع رقم ونص، مش حاجة مجهولة.

اللينك كمان متراجع:

link.tsx

<Link to="/posts" search={{ page: 2, filter: "react" }}>  الصفحة 2</Link>

لو حطيت نص في page، TypeScript يرفض قبل التشغيل. ده الفرق العملي عن راوتر بيسيب الـ search نص حر.

خلّصت الفصل لما

تعرّف schema للـ search
تستخدم catch للقيمة الاحتياطية
تقرأ بـ Route.useSearch
تمرر search للينك ككائن مش نص

🧠 اختبر نفسك

١) العنوان من غير page. القيمة تبقى كام؟

١، لأن catch على الرقم رجع ١.

٢) ليه search على اللينك مش query string بإيدك؟

عشان النوع يتراجع. النص مكان الرقم يرفض وقت الكتابة.

٣) الفنكشن اللي بتقرأ الحالة؟

Route.useSearch على نفس ملف الراوت.