إيه TanStack Router؟

TanStack Router مكتبة راوتنج لـ React، وفيها دعم لـ Solid كمان. اللي يميزها عن react-router:

• الأنواع كاملة. الـ params و search params بيتكتبوا لوحدهم من غير ما تكتب الأنواع بإيدك.
• راوتنج بالملفات زي Next.js، أو بالكوم تكتب الراوتس بنفسك.
• تحميل داتا جوه الراوت، قريب من React Router الحديث أو Remix.
• الـ search params حالة حقيقية، مش نص في آخر العنوان بس.

التنصيب

المسار الشائع في الأول: Vite مع راوتنج بالملفات. الأوامر وأسماء الحزم بتتغير، فراجع الدوكس قبل ما تنسخها.

npm create vite@latest my-app -- --template react-tscd my-appnpm install @tanstack/react-routernpm install -D @tanstack/router-plugin

الـ plugin هو اللي يولّد شجرة الراوتس. في vite.config.ts لازم يكون قبل react().

import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import { tanstackRouter } from "@tanstack/router-plugin/vite";export default defineConfig({  plugins: [    tanstackRouter({ target: "react", autoCodeSplitting: true }),    react(),  ],});

autoCodeSplitting يخلّي كل راوت يتحمّل لوحده لما المستخدم يفتحه، بدل ما كل الصفحات تنزل في أول ملف. لو الترتيب معكوس والـ plugin بعد react()، التوليد ممكن يبوظ.

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

• تفرّق النوع التلقائي عن الأنواع اللي تكتبها بإيدك
• تحط plugin الراوتر قبل react
• تعرف إن autoCodeSplitting تقسيم تحميل الراوتس