generouted

ولدت

الطرق المستندة إلى الملفات التي تم إنشاؤها لـ Vite

تحفيز

لقد استمتعت باستخدام التوجيه المستند إلى الملف منذ أن جربت Next.js (دليل الصفحات). بعد تطبيق نفس المفهوم من خلال تطبيقات Vite و Side Client ، بدأت في كتابة منشورات المدونة التي تغطي تنفيذ التوجيه المستند إلى الملفات من جانب العميل باستخدام Raive Router الذي تم تعبئته لاحقًا كما generouted .

يجلب generouted اليوم العديد من الميزات ، ويدعم أطر عمل متعددة وأجهزة توجيه ، ويلهم الأفكار والاتفاقيات من Next.js ، Remix ، Expo ، Docusaurus ، Sveltekit والمزيد.

كيف تعمل؟

يستخدم generouted API من Vite Glob Import لدرج الطرق داخل دليل src/pages ويقوم بإنشاء الأشجار والمعارض على أساس اتفاقيات generouted .

هناك أيضًا مكونات VITE متاحة لبعض عمليات التكامل لتوفير مكونات/خطافات/خطافات آمنة من النوع من خلال توليد الكود.

سمات

• ؟ التوجيه المستند إلى الملف من جانب العميل
• ⚡ مدعوم من Vite
• رد الفعل مع react-router-dom أو @tanstack/router ؟ أو @tanstack/react-location
• دعم قوي مع @solidjs/router
• طرق MDX المستندة إلى الملف مع React أو Solid ، يتطلب @mdx-js/rollup تثبيت وإعداد
• ؟ الملاحة الآمنة من النوع
• معانٍ عالمية آمنة من النوع
• ؟ تقسيم الكود المستند إلى الطريق وتحميله كسول
• ؟ لوادر البيانات والإجراءات المستندة إلى المسار
• ؟ حدود الخطأ القائمة على المسار
• تخطيطات متداخلة
• ؟ مجموعات تخطيط غير مستحيلة
• ❓ طرق ثابتة وديناميكية اختيارية
• ؟ مسارات تم تجاهلها لكل ملف أو دليل

المستكشف عبر الإنترنت

• ⚡ قم بزيارة ملعب التفاعل عبر generouted عبر Stackblitz
• ؟ استكشاف أنماط التوجيه المستندة إلى الملفات والاتفاقيات
• ؟ تصور تخطيطات الطرق ومسارات المسارات التي تم حلها
• تحديث src/pages/ Files وشاهد التغييرات الخاصة بك تعكس

ابدء

رد فعل جهاز التوجيه

رد فعل جهاز التوجيه

في حال لم يكن لديك مشروع Vite مع React و TypeScript ، تحقق من وثائق Vite لبدء مشروع جديد.

تثبيت

pnpm add @generouted/react-router react-router-dom

يثبت

 // vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import generouted from '@generouted/react-router/plugin'

export default defineConfig ( { plugins : [ react ( ) , generouted ( ) ] } ) 

الاستخدام

 // src/main.tsx

import { createRoot } from 'react-dom/client'
import { Routes } from '@generouted/react-router'

createRoot ( document . getElementById ( 'root' ) ! ) . render ( < Routes /> ) 

إضافة صفحات

أضف الصفحة الرئيسية عن طريق إنشاء ملف جديد src/pages/index.tsx → / ، ثم قم بتصدير مكون افتراضي:

 export default function Home ( ) {
  return < h1 > Home </ h1 >
}

تحقق من قسم اتفاقيات التوجيه أدناه.

مستندات

يمكنك العثور على مزيد من التفاصيل حول التنقل الآمن والمعارض العالمي في مستندات @generouted/react-router .

أمثلة

• التنقل الآمن من النوع + معارض عالمي
• تكامل مخصص
• تكامل مخصص مع مسار مخصص
• طرق MDX

جهاز التوجيه الصلب

جهاز التوجيه الصلب

في حال لم يكن لديك مشروع Vite مع Solid و TypeScript ، تحقق من وثائق Vite لبدء مشروع جديد.

تثبيت

pnpm add @generouted/solid-router @solidjs/router

يثبت

 // vite.config.ts

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import generouted from '@generouted/solid-router/plugin'

export default defineConfig ( { plugins : [ solid ( ) , generouted ( ) ] } ) 

الاستخدام

 // src/main.tsx

import { render } from 'solid-js/web'
import { Routes } from '@generouted/solid-router'

render ( Routes , document . getElementById ( 'root' ) ! ) 

إضافة صفحات

أضف الصفحة الرئيسية عن طريق إنشاء ملف جديد src/pages/index.tsx → / ، ثم قم بتصدير مكون افتراضي:

 export default function Home ( ) {
  return < h1 > Home </ h1 >
}

تعرف على المزيد حول اتفاقيات التوجيه generouted أدناه.

مستندات

يمكنك العثور على مزيد من التفاصيل حول التنقل الآمن والمعارض العالمي في مستندات @generouted/solid-router .

أمثلة

• التنقل الآمن من النوع + معارض عالمي

Transtack React Router-دعم تجريبي قيد التنفيذ؟

Transtack React Router-دعم تجريبي قيد التنفيذ؟

تحقق من المستندات هنا

أمثلة

• أساسي

رد الفعل - إهمال

رد الفعل - إهمال

في حال لم يكن لديك مشروع Vite مع React و TypeScript ، تحقق من وثائق Vite لبدء مشروع جديد.

تثبيت

pnpm add generouted @tanstack/react-location

الاستخدام

 // src/main.tsx

import { createRoot } from 'react-dom/client'
import { Routes } from 'generouted/react-location'

createRoot ( document . getElementById ( 'root' ) ! ) . render ( < Routes /> ) 

إضافة صفحات

أضف الصفحة الرئيسية عن طريق إنشاء ملف جديد src/pages/index.tsx → / ، ثم قم بتصدير مكون افتراضي:

 export default function Home ( ) {
  return < h1 > Home </ h1 >
} 

أمثلة

• أساسي
• لوادر البيانات
• معارض
• تخطيطات متداخلة

الاتفاقيات

الملفات والأدلة التسمية والاتفاقيات

• إعلان الطرق في src/pages
• يدعم .tsx ، .jsx و .mdx ملحقات الملف
• اختياري src/pages/_app.tsx لتخطيط مستوى التطبيق
• اختياري src/pages/404.tsx لصفحة مخصصة غير مؤسسة

مسارات الفهرس

• src/pages/index.tsx → /
• src/pages/posts/index.tsx → /posts

طرق متداخلة

• src/pages/posts/2022/index.tsx → /posts/2022
• src/pages/posts/2022/resolutions.tsx → /posts/2022/resolutions

الطرق الديناميكية

• src/pages/posts/[slug].tsx → /posts/:slug
• src/pages/posts/[slug]/tags.tsx → /posts/:slug/tags
• src/pages/posts/[...all].tsx → /posts/*

تخطيطات متداخلة

• عن طريق تحديد _layout.tsx في أي دليل متداخل → src/pages/posts/_layout.tsx
• يتطلب استخدام مكون <Outlet /> لتقديم تخطيط الأطفال
• سيتم لف جميع الملفات داخل src/pages/posts/ Directory في هذه الحالة

عناوين URL المتداخلة بدون تخطيطات متداخلة

• يجب أن يكون ملف الطريق خارج دليل التخطيط المتداخل
• تشمل النقاط . بين الأجزاء التي سيتم تحويلها إلى مائلات إلى الأمام
• src/pages/posts.nested.as.url.not.layout.tsx → /posts/nested/as/url/not/layout

تخطيطات بدون مسار

• على غرار التخطيطات المتداخلة لتعريف التصميم
• عن طريق لف الدليل الأصل مع أقواس ()
• src/pages/(auth)/_layout.tsx
• src/pages/(auth)/login.tsx → /login
• لا يتم تضمين اسم دليل الوالدين في مسارات الطرق

الوسائط العالمية

• عن طريق بادئة اسم الملف مع علامة زائد + (التفكير في الوسيط هو مسار إضافي يتراكب الطريق الحالي)
• التنقل المعدل المتاح عبر خطاف useModals()
• src/pages/+info.tsx → /info
• src/pages/+checkout/+details.tsx /checkout/details
• src/pages/+checkout/+payment.tsx → /checkout/payment

شرائح اختيارية

• عن طريق بادئة شريحة مسار مع علامة ناقص - (التفكير في أن القطاع يمكن طرحه أو إزالته من مسار الطريق)
• src/pages/-en/about.tsx → /en?/about → /en/about ، /about
• src/pages/-[lang]/about.tsx → /:lang?/about /en/about /fr/about /about

مسارات تجاهل

• سيتم تجاهل أي دليل أو ملف بتطوير السطحي _
• src/pages/_ignored.tsx
• src/pages/posts/_components/button.tsx
• src/pages/posts/_components/link.tsx

صادرات الصفحة

• مطلوب صفحة export default Component() {...}
• export const Loader = () => {...} وظيفة محمل الصفحة الاختيارية
• اختياري وظيفة إجراءات الإجراء export const Action = () => {...}
• اختياري القائم على المعلقة المعلقة export const Pending = () => {...}
• خطأ اختياري للمكون export const Catch = () => {...}

مثال

هيكل الدليل

src/pages
├── (auth)
│   ├── _layout.tsx
│   ├── login.tsx
│   └── register.tsx
├── blog
│   ├── _components
│   │   ├── button.tsx
│   │   └── comments.tsx
│   ├── [...all].tsx
│   ├── [slug].tsx
│   ├── _layout.tsx
│   ├── index.tsx
│   └── tags.tsx
├── docs
│   ├── -[lang]
│   │   ├── index.tsx
│   │   └── resources.tsx
│   └── -en
│       └── contributors.tsx
├── +info.tsx
├── 404.tsx
├── _app.tsx
├── _ignored.tsx
├── about.tsx
├── blog.w.o.layout.tsx
└── index.tsx

ملخص

ملف	طريق	مؤتمر
(auth)/_layout.tsx		مجموعة تخطيط غير مستحيلة
(auth)/login.tsx	/login	طريق منتظم
(auth)/register.tsx	/register	طريق منتظم
blog/_components/button.tsx		المسار الذي تم تجاهله بواسطة دليل تم تجاهله
blog/_components/comments.tsx		المسار الذي تم تجاهله بواسطة دليل تم تجاهله
blog/[...all].tsx	/blog/*	طريق الصيد الديناميكي
blog/[slug].tsx	/blog/:slug	الطريق الديناميكي
blog/_layout.tsx		تخطيط /blog
blog/index.tsx	/blog	فهرس الطريق
blog/tags.tsx	/blog/tags	طريق منتظم
docs/-[lang]/index.tsx	/docs/:lang?/index	شريحة مسار ديناميكية اختيارية
docs/-[lang]/resources.tsx	/docs/:lang?/resources	شريحة مسار ديناميكية اختيارية
docs/-en/contributors.tsx	/docs/en?/contributors	شريحة مسار ثابت اختياري
+info.tsx	/info	طريق مشروط
404.tsx	*	مخصص 404 (اختياري)
_app.tsx		تخطيط app المخصص (اختياري)
_ignored.tsx		مسار تم تجاهله
about.tsx	/about	طريق منتظم
blog.wolayout.tsx	/blog/w/o/layout	الطريق بدون /blog
index.tsx	/	فهرس الطريق

API

التوجيه

عبر @generouted/react-router أو @generouted/solid-router

• <Routes /> -مكون التوجيه المستند إلى الملفات ليتم تقديمه في إدخال التطبيق
• routes TREERES TREE /كائن مستندة إلى الملفات المستخدمة افتراضيًا في <Routes /> COMPONENT

التوجيه + تقسيم الكود وتحميل كسول

عبر @generouted/react-router/lazy أو @generouted/solid-router/lazy

• تستخدم بدلاً من @generouted/react-router أو @generouted/solid-router لتمكين التحميل الكسول
• تأكد من استبدال جميع الواردات بالواردات الكسول - أي في إدخال التطبيق و src/pages/_app.tsx
• يوفر نفس <Routes /> و routes Exports

الإضافات

عبر @generouted/react-router/plugin أو @generouted/solid-router/plugin

• المكون الإضافي Vite لتوليد النوع وتهيئة المكونات/الخطافات/الخطوط الآمنة تهيئة
• يولد ملف src/router.ts
• الصادرات التي آمنت نوعها <Link> ، <Navigate> ، useModals() ، useNavigate() ، useParams() ، redirect() ، إلخ.
• تحقق من مستندات @generouted/react-router أو مستندات @generouted/solid-router لمزيد من التفاصيل

جوهر

عبر @generouted/react-router/core أو @generouted/solid-router/core

• متاح للتخصيص ، ومع ذلك يوصى باستخدام دليل التكامل المتاح عبر مكون <Routes/>
• تحقق من مثال التكامل المخصص

التعليمات

كيفية تنفيذ الطرق المحمية أو المحمية؟

هناك طرق متعددة لتحقيق ذلك. إذا كنت تفضل التعامل مع المنطق في مكان واحد ، فيمكنك تحديد الطرق المحمية مع معالجة إعادة التوجيه داخل مكون:

 // src/config/redirects.tsx

import { Navigate , useLocation } from 'react-router-dom'

import { useAuth } from '../context/auth'
import { Path } from '../router'

const PRIVATE : Path [ ] = [ '/logout' ]
const PUBLIC : Path [ ] = [ '/login' ]

export const Redirects = ( { children } : { children : React . ReactNode } ) => {
  const auth = useAuth ( )
  const location = useLocation ( )

  const authenticatedOnPublicPath = auth . active && PUBLIC . includes ( location . pathname as Path )
  const unAuthenticatedOnPrivatePath = ! auth . active && PRIVATE . includes ( location . pathname as Path )

  if ( authenticatedOnPublicPath ) return < Navigate to = "/" replace />
  if ( unAuthenticatedOnPrivatePath ) return < Navigate to = "/login" replace />

  return children
}

ثم استخدم هذا المكون ( <Redirects> ) في التصميم على مستوى الجذر src/pages/_app.tsx لالتفاف المكون <Outlet> :

 // src/pages/_app.tsx

import { Outlet } from 'react-router-dom'

import { Redirects } from '../config/redirects'

export default function App ( ) {
  return (
    < section >
      < header >
        < nav > ... </ nav >
      </ header >

      < main >
        < Redirects >
          < Outlet />
        </ Redirects >
      </ main >
    </ section >
  )
}

يمكنك العثور على مثال كامل لهذا النهج في قالب العرض

كيف تستخدم مع أجهزة توجيه التجزئة أو الذاكرة؟

يمكنك استخدام كائن routes المصدرة لتخصيص جهاز التوجيه أو لاستخدام أجهزة التوجيه التجزئة/الذاكرة:

 import { createRoot } from 'react-dom/client'
import { RouterProvider , createHashRouter } from 'react-router-dom'
import { routes } from '@generouted/react-router'

const router = createHashRouter ( routes )
const Routes = ( ) => < RouterProvider router = { router } />

createRoot ( document . getElementById ( 'root' ) ! ) . render ( < Routes /> ) 

رخصة

معهد ماساتشوستس للتكنولوجيا