راوت ديناميكي وصفحة جوه صفحة

عنوان زي /posts/1 و /posts/2 ملف واحد. علامة الدولار قبل اسم المعامل في اسم الملف.

src/routes/  posts.tsx  posts/    index.tsx    $postId.tsx

src/routes/posts/$postId.tsx

import { createFileRoute } from "@tanstack/react-router";export const Route = createFileRoute("/posts/$postId")({  component: PostPage,});function PostPage() {  const { postId } = Route.useParams();  return <h1>عرض البوست رقم: {postId}</h1>;}

افتح /posts/5. الرقم يطلع في الصفحة، ونوعه معروف من غير ما تكتب نوع بإيدك.

الـ layout

ملف posts.tsx جنب المجلد، مش جواه، هو الغلاف لكل حاجة تحت /posts. posts/index.tsx هو /posts نفسه لما مفيش رقم.

src/routes/posts.tsx

import { createFileRoute, Outlet, Link } from "@tanstack/react-router";export const Route = createFileRoute("/posts")({  component: PostsLayout,});function PostsLayout() {  return (    <div style={{ display: "flex", gap: "2rem" }}>      <aside>        <Link to="/posts/1">Post 1</Link>        <br />        <Link to="/posts/2">Post 2</Link>      </aside>      <main>        <Outlet />      </main>    </div>  );}

src/routes/posts/index.tsx

import { createFileRoute } from "@tanstack/react-router";export const Route = createFileRoute("/posts/")({  component: () => <p>اختار بوست من القايمة</p>,});

Outlet هنا يرسم يا صفحة الاختيار يا صفحة الرقم، والعمود الجانبي ثابت.

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

ملف المعامل يبدأ بعلامة دولار
Route.useParams يقرأ الرقم
posts.tsx غلاف و posts/index.tsx الصفحة الفاضية
الشرطة الأخيرة تفرّق الاتنين

🧠 اختبر نفسك

١) اسم الملف اللي يمثل بوست برقمه؟

$postId.tsx جوه مجلد posts.

٢) إيه الفرق بين /posts و /posts/ في createFileRoute؟

الأول الغلاف. التاني بشرطة أخيرة هو صفحة الـ index.

٣) العمود الجانبي يتحط فين؟

في كومبوننت الغلاف، والصفحة المتغيرة جوه Outlet.