الملفات وصفحة الجذر · مذكرات سعيد

اعمل مجلد src/routes/. كل ملف راوت. المكتبة بتراقب المجلد وتولّد routeTree.gen.ts. الملف ده مولّد، متكتبهوش بإيدك.

src/  routes/    __root.tsx    index.tsx    about.tsx  main.tsx

__root.tsx الـ layout العام. index.tsx هو /. about.tsx هو /about.

الجذر

src/routes/__root.tsx

import { createRootRoute, Outlet, Link } from "@tanstack/react-router";export const Route = createRootRoute({  component: () => (    <>      <nav>        <Link to="/">Home</Link>        <Link to="/about">About</Link>      </nav>      <hr />      <Outlet />    </>  ),});

Outlet مكان محتوى الصفحة الحالية. اللينكات من Link، مش وسم عادي، عشان النوع يتراجع.

الصفحات

src/routes/index.tsx

import { createFileRoute } from "@tanstack/react-router";export const Route = createFileRoute("/")({  component: HomePage,});function HomePage() {  return <h1>الصفحة الرئيسية</h1>;}

src/routes/about.tsx

import { createFileRoute } from "@tanstack/react-router";export const Route = createFileRoute("/about")({  component: () => <h1>عن الموقع</h1>,});

مرّر اسم الدالة للكومبوننت، مش دالة سهم بترجع العنصر كل مرة. كده الكومبوننت مش بيتعمله جديد في كل رسم، وده نمط أمثلة المكتبة.

ربط التطبيق

src/main.tsx

import { StrictMode } from "react";import ReactDOM from "react-dom/client";import { RouterProvider, createRouter } from "@tanstack/react-router";import { routeTree } from "./routeTree.gen";const router = createRouter({ routeTree });declare module "@tanstack/react-router" {  interface Register {    router: typeof router;  }}ReactDOM.createRoot(document.getElementById("root")!).render(  <StrictMode>    <RouterProvider router={router} />  </StrictMode>,);

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

عندك __root و index على الأقل
Outlet في الجذر
createRouter بياخد routeTree
سجلت نوع الراوتر في Register

🧠 اختبر نفسك

١) ملف index.tsx يمثل أنهي عنوان؟

الشرطة المائلة، الصفحة الرئيسية.

٢) Outlet بيعمل إيه؟

يرسم محتوى الراوت الحالي جوه الـ layout.

٣) ليه نمرر HomePage مش دالة سهم؟

عشان ما نعملش كومبوننت جديد كل رسم، وده نمط المكتبة.