generouted

Generouted

Rute berbasis file yang dihasilkan untuk vite

Motivasi

Saya menikmati menggunakan perutean berbasis file sejak saya mencoba next.js (direktori halaman). Setelah menerapkan konsep yang sama dengan aplikasi vite dan sisi klien, saya mulai menulis posting blog yang mencakup implementasi perutean berbasis file sisi klien dengan react router yang dikemas kemudian seperti generouted .

Today generouted membawa banyak fitur, mendukung berbagai kerangka kerja dan router, dan menginspirasi ide dan konvensi dari Next.js, Remix, Expo, Docusaurus, Sveltekit dan banyak lagi.

Bagaimana cara kerjanya?

generouted menggunakan API impor Glob Vite untuk mendaftar rute dalam direktori src/pages dan menghasilkan pohon rute dan modal berdasarkan konvensi generouted .

Ada juga plugin vite yang tersedia untuk beberapa integrasi untuk menyediakan komponen/kait/util yang aman jenis melalui generasi kode.

Fitur

• ? Perutean berbasis file sisi klien
• ⚡ Didukung oleh Vite
• Dukungan bereaksi dengan react-router-dom atau @tanstack/router ? atau @tanstack/react-location
• Dukungan solid dengan @solidjs/router
• Rute MDX berbasis file dengan React or Solid, membutuhkan instalasi dan pengaturan @mdx-js/rollup
• ? Navigasi jenis-aman
• Modal global tipe-aman
• ? Pemisahan kode berbasis rute dan pemuatan malas
• ? Pemuat dan tindakan data berbasis rute
• ? Batas kesalahan berbasis rute
• Tata letak bersarang
• ? Grup tata letak tanpa jalan
• ❓ Rute statis dan dinamis opsional
• ? Rute yang diabaikan per file atau direktori

Penjelajah online

• ⚡ Kunjungi taman bermain interaktif generouted melalui StackBlitz
• ? Jelajahi pola dan konvensi perutean berbasis file
• ? Visualisasikan Tata Letak Rute dan jalur rute yang diselesaikan
• Perbarui src/pages/ File dan lihat perubahan Anda yang mencerminkan

Memulai

Bereaksi router

Bereaksi router

Jika Anda tidak memiliki proyek vite dengan React and TypeScript, periksa dokumentasi vite untuk memulai proyek baru.

Instalasi

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

Pengaturan

 // 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 ( ) ] } ) 

Penggunaan

 // src/main.tsx

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

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

Menambahkan halaman

Tambahkan halaman beranda dengan membuat file baru src/pages/index.tsx → / , lalu ekspor komponen default:

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

Periksa bagian Konvensi Routing di bawah ini.

Dokumen

Anda dapat menemukan detail lebih lanjut tentang navigasi jenis-aman dan modal global di @generouted/react-router .

Contoh

• Navigasi jenis-aman + modal global
• Integrasi khusus
• Integrasi khusus dengan jalur khusus
• Rute MDX

Router padat

Router padat

Jika Anda tidak memiliki proyek vite dengan solid dan naskah, periksa dokumentasi vite untuk memulai proyek baru.

Instalasi

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

Pengaturan

 // 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 ( ) ] } ) 

Penggunaan

 // src/main.tsx

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

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

Menambahkan halaman

Tambahkan halaman beranda dengan membuat file baru src/pages/index.tsx → / , lalu ekspor komponen default:

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

Lihat lebih lanjut tentang konvensi perutean generouted di bawah ini.

Dokumen

Anda dapat menemukan detail lebih lanjut tentang navigasi jenis-aman dan modal global di @generouted/solid-router .

Contoh

• Navigasi jenis-aman + modal global

Tanstack React Router-Dukungan eksperimental dalam proses?

Tanstack React Router-Dukungan eksperimental dalam proses?

Lihat dokumen di sini

Contoh

• Dasar

Lokasi Bereaksi - Teram

Lokasi Bereaksi - Teram

Jika Anda tidak memiliki proyek vite dengan React and TypeScript, periksa dokumentasi vite untuk memulai proyek baru.

Instalasi

pnpm add generouted @tanstack/react-location

Penggunaan

 // src/main.tsx

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

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

Menambahkan halaman

Tambahkan halaman beranda dengan membuat file baru src/pages/index.tsx → / , lalu ekspor komponen default:

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

Contoh

• Dasar
• Pemuat data
• Modal
• Tata letak bersarang

Konvensi

File dan Direktori Penamaan dan Konvensi

• Deklarasi rute di src/pages
• Mendukung ekstensi file .tsx , .jsx dan .mdx
• src/pages/_app.tsx untuk tata letak level aplikasi
• src/pages/404.tsx untuk halaman yang tidak ditemukan khusus

Rute indeks

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

Rute bersarang

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

Rute dinamis

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

Tata letak bersarang

• Dengan mendefinisikan _layout.tsx di direktori bersarang → src/pages/posts/_layout.tsx
• Membutuhkan menggunakan komponen <Outlet /> untuk membuat tata letak anak -anak
• Semua file dalam src/pages/posts/ direktori dalam kasus ini, akan dibungkus dengan tata letak itu

URL bersarang tanpa tata letak bersarang

• File rute harus berada di luar direktori tata letak bersarang
• Sertakan titik -titik . Antara segmen yang akan dikonversi menjadi lereng ke depan
• src/pages/posts.nested.as.url.not.layout.tsx → /posts/nested/as/url/not/layout

Tata letak tanpa jalan

• Mirip dengan tata letak bersarang untuk definisi tata letak
• Dengan membungkus direktori induk dengan tanda kurung ()
• src/pages/(auth)/_layout.tsx
• src/pages/(auth)/login.tsx → /login
• Tata letak nama direktori induk tidak termasuk dalam jalur rute

Modal global

• Dengan mengawali nama file dengan tanda plus + (berpikir modal adalah rute tambahan yang overlay rute saat ini)
• Modal Navigasi tersedia melalui hook useModals()
• src/pages/+info.tsx → /info
• src/pages/+checkout/+details.tsx → /checkout/details
• src/pages/+checkout/+payment.tsx → /checkout/payment

Segmen opsional

• Dengan mengawali segmen rute dengan tanda minus - (berpikir segmen dapat dikurangi atau dihapus dari jalur rute)
• src/pages/-en/about.tsx → /en?/about → /en/about , /about
• src/pages/-[lang]/about.tsx → /:lang?/about → /en/about , /fr/about , /about

Rute yang diabaikan

• Direktori atau file apa pun dimulai dengan garis bawah _ akan diabaikan
• src/pages/_ignored.tsx
• src/pages/posts/_components/button.tsx
• src/pages/posts/_components/link.tsx

Ekspor halaman

• Komponen Halaman yang Diperlukan export default Component() {...}
• Fungsi Loader Halaman Opsional export const Loader = () => {...}
• Fungsi Halaman Opsional export const Action = () => {...}
• Komponen Penangguhan Berbasis Ketegangan Opsional export const Pending = () => {...}
• Komponen Kesalahan Opsional export const Catch = () => {...}

Contoh

Struktur Direktori

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

Ringkasan

Mengajukan	Jalur	Konvensi
(auth)/_layout.tsx		Grup Tata Letak Tanpa Jalur
(auth)/login.tsx	/login	Rute reguler
(auth)/register.tsx	/register	Rute reguler
blog/_components/button.tsx		Rute yang diabaikan dengan direktori yang diabaikan
blog/_components/comments.tsx		Rute yang diabaikan dengan direktori yang diabaikan
blog/[...all].tsx	/blog/*	Rute tangkapan dinamis
blog/[slug].tsx	/blog/:slug	Rute dinamis
blog/_layout.tsx		Tata letak untuk /blog
blog/index.tsx	/blog	Rute indeks
blog/tags.tsx	/blog/tags	Rute reguler
docs/-[lang]/index.tsx	/docs/:lang?/index	Segmen rute dinamis opsional
docs/-[lang]/resources.tsx	/docs/:lang?/resources	Segmen rute dinamis opsional
docs/-en/contributors.tsx	/docs/en?/contributors	Segmen rute statis opsional
+info.tsx	/info	Rute modal
404.tsx	*	Custom 404 (opsional)
_app.tsx		Tata Letak app Kustom (Opsional)
_ignored.tsx		Rute yang diabaikan
about.tsx	/about	Rute reguler
blog.wolayout.tsx	/blog/w/o/layout	Rute tanpa /blog
index.tsx	/	Rute indeks

API

Rute

Via @generouted/react-router atau @generouted/solid-router

• <Routes /> -Komponen perutean berbasis file untuk diterjemahkan di entri aplikasi
• routes -Rute Berbasis File Pohon /Objek yang Digunakan Secara Default Di Komponen <Routes />

Routing + Code-Plitting dan Lazy-Loading

Via @generouted/react-router/lazy atau @generouted/solid-router/lazy

• Digunakan sebagai ganti @generouted/react-router atau @generouted/solid-router untuk mengaktifkan malas-loading
• Pastikan untuk mengganti semua impor ke impor malas - yaitu di entri aplikasi dan src/pages/_app.tsx
• Memberikan <Routes /> yang sama dan ekspor routes

Plugin

Via @generouted/react-router/plugin atau @generouted/solid-router/plugin

• Plugin Vite untuk pembuatan tipe dan menginisialisasi komponen/kait/util jenis yang aman
• Menghasilkan file src/router.ts
• Ekspor Tipe-Safe <Link> , <Navigate> , useModals() , useNavigate() , useParams() , redirect() , dll.
• Lihat @generouted/react-router atau @generouted/solid-router Docs untuk lebih jelasnya

Inti

Via @generouted/react-router/core atau @generouted/solid-router/core

• Tersedia untuk kustomisasi, namun disarankan untuk menggunakan direktori integrasi yang tersedia melalui komponen <Routes/>
• Lihat contoh integrasi khusus

FAQ

Bagaimana cara mengimplementasikan rute yang dilindungi atau dijaga?

Ada beberapa pendekatan untuk mencapai itu. Jika Anda lebih suka menangani logika di satu tempat, Anda dapat menentukan rute yang dilindungi dengan penanganan pengalihan dalam suatu komponen:

 // 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
}

Kemudian gunakan komponen itu ( <Redirects> ) pada tata letak level root src/pages/_app.tsx untuk membungkus komponen <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 >
  )
}

Anda dapat menemukan contoh lengkap dari pendekatan ini di Templat Render

Bagaimana cara menggunakan dengan hash atau router memori?

Anda dapat menggunakan objek routes yang diekspor untuk menyesuaikan router atau menggunakan hash/router memori:

 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 /> ) 

Lisensi

Mit