generouted

Generiert

Generierte dateibasierte Routen für vite

Motivation

Ich habe es genossen, dateibasiertes Routing zu verwenden, seit ich Next.js (Pages-Verzeichnis) ausprobiert habe. Nachdem ich dasselbe Konzept mit vite und clientseitigen Anwendungen angewendet hatte, begann ich, Blog-Posts zu schreiben, die die Implementierung von clientseitigem dateibasiertem Routing mit React Router abdeckten, der später als generouted verpackt wurde.

Heute bringt generouted viele Funktionen mit, unterstützt mehrere Frameworks und Router und inspiriert Ideen und Konventionen von Next.js, Remix, Expo, Docusaurus, Sveltekit und mehr.

Wie funktioniert es?

generouted verwendet die Glob -Import -API von Vite, um die Routen im Verzeichnis src/pages aufzulisten, und generiert den Routes -Baum und die Modale basierend auf den Konventionen von generouted .

Für einige Integrationen stehen auch VITE-Plugins zur Verfügung, um die Typ-Safe-Komponenten/-haken/-Sile über die Code-Generation bereitzustellen.

Merkmale

• ? Clientseitige dateibasierte Routing
• ⚡ Angetrieben von Vite
• React-Unterstützung mit react-router-dom oder @tanstack/router ? oder @tanstack/react-location
• Solide Unterstützung mit @solidjs/router
• Dateibasierte MDX-Routen mit React oder Solid, erfordert @mdx-js/rollup Installation und Setup
• ? Typ-Safe-Navigation
• Globale Modale von Typ-Safe
• ? Routenbasierte Code-Splitting und Faulheitsladung
• ? Routenbasierte Datenlader und Aktionen
• ? Routenbasierte Fehlergrenze
• Verschachtelte Layouts
• ? Pfadlosen Layoutgruppen
• ❓ Optionale statische und dynamische Routen
• ? Ignorierte Routen pro Datei oder Verzeichnis

Online -Explorer

• ⚡ Besuchen Sie den interaktiven Spielplatz von generouted über Stackblitz
• ? Erforschen Sie dateibasierte Routingmuster und Konventionen
• ? Visualisieren Sie die Routenlayouts und die aufgelösten Routenpfade
• Aktualisieren Sie src/pages/ Dateien und sehen Sie, wie Ihre Änderungen reflektieren

Erste Schritte

Router reagieren

Router reagieren

Wenn Sie kein Vite -Projekt mit React und TypeScript haben, überprüfen Sie die VITE -Dokumentation, um ein neues Projekt zu starten.

Installation

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

Aufstellen

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

Verwendung

 // src/main.tsx

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

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

Seiten hinzufügen

Fügen Sie die Startseite hinzu, indem Sie eine neue Datei src/pages/index.tsx → / erstellen und dann eine Standardkomponente exportieren:

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

Überprüfen Sie den Abschnitt Routing Conventions unten.

Dokumente

Weitere Details zur Typ-Safe-Navigation und globalen Modalen finden Sie unter @generouted/react-router Dokumenten.

Beispiele

• Typ-Safe Navigation + Globale Modale
• Benutzerdefinierte Integration
• Benutzerdefinierte Integration mit benutzerdefiniertem Pfad
• MDX -Routen

Solider Router

Solider Router

Wenn Sie kein Vite -Projekt mit soliden und typischen Schriften haben, überprüfen Sie die VITE -Dokumentation, um ein neues Projekt zu starten.

Installation

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

Aufstellen

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

Verwendung

 // src/main.tsx

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

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

Seiten hinzufügen

Fügen Sie die Startseite hinzu, indem Sie eine neue Datei src/pages/index.tsx → / erstellen und dann eine Standardkomponente exportieren:

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

Weitere Informationen zu generouted Routing -Konventionen finden Sie unten.

Dokumente

Weitere Details zur Typ-Safe-Navigation und globalen Modalen finden Sie unter @generouted/solid-router Dokumenten.

Beispiele

• Typ-Safe Navigation + Globale Modale

TanStack React Router-experimentelle Unterstützung in der Progress?

TanStack React Router-experimentelle Unterstützung in der Progress?

Schauen Sie sich die Dokumente hier an

Beispiele

• Basic

Position reagieren - veraltet

Position reagieren - veraltet

Wenn Sie kein Vite -Projekt mit React und TypeScript haben, überprüfen Sie die VITE -Dokumentation, um ein neues Projekt zu starten.

Installation

pnpm add generouted @tanstack/react-location

Verwendung

 // src/main.tsx

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

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

Seiten hinzufügen

Fügen Sie die Startseite hinzu, indem Sie eine neue Datei src/pages/index.tsx → / erstellen und dann eine Standardkomponente exportieren:

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

Beispiele

• Basic
• Datenlader
• Modale
• Verschachtelte Layouts

Konventionen

Benennung und Konventionen von Dateien und Verzeichnissen

• Routenerklärung auf src/pages
• Unterstützt .tsx , .jsx und .mdx -Dateierweiterungen
• Optionales src/pages/_app.tsx für ein App -Level -Layout
• Optionale src/pages/404.tsx für eine benutzerdefinierte nicht gegründete Seite

Indexrouten

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

Verschachtelte Routen

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

Dynamische Routen

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

Verschachtelte Layouts

• Durch Definieren _layout.tsx in einem verschachtelten Verzeichnis → src/pages/posts/_layout.tsx
• Benötigt die Verwendung einer <Outlet /> -Komponente, um Layout -Kinder zu rendern
• In diesem Fall werden alle Dateien innerhalb des src/pages/posts/ Verzeichnisses in diesem Fall mit diesem Layout verpackt

Verschachtelte URLs ohne verschachtelte Layouts

• Die Routendatei sollte außerhalb des verschachtelten Layout -Verzeichnisses liegen
• Punkte einschließen . zwischen den Segmenten, die in die Weiterleitung von Schrägstrichen umgewandelt werden sollen
• src/pages/posts.nested.as.url.not.layout.tsx → /posts/nested/as/url/not/layout

Pathlose Layouts

• Ähnlich wie verschachtelte Layouts für die Layoutdefinition
• Durch das Überwickeln des übergeordneten Verzeichnisses mit Klammern ()
• src/pages/(auth)/_layout.tsx
• src/pages/(auth)/login.tsx → /login
• Layout Der Name des Elternverzeichnisses ist nicht in den Routenpfaden enthalten

Globale Modale

• Durch das Präfix des Dateinamens mit einem Pluszeichen + (denke, der Modal ist eine zusätzliche Route, die die aktuelle Route überlagert)
• Modals Navigation erhältlich über den useModals() Hook
• src/pages/+info.tsx → /info
• src/pages/+checkout/+details.tsx → /checkout/details
• src/pages/+checkout/+payment.tsx → /checkout/payment

Optionale Segmente

• Durch das Präfix eines Routensegments mit einem Minuszeichen - (Denken Sie, dass das Segment vom Routenpfad abtrahiert oder entfernt werden kann)
• src/pages/-en/about.tsx → /en?/about → /en/about , /about
• src/pages/-[lang]/about.tsx → /:lang?/about → /en/about , /fr/about , /about

Ignorierte Routen

• Jedes Verzeichnis oder eine Datei beginnt mit einem Unterstrich _ wird ignoriert
• src/pages/_ignored.tsx
• src/pages/posts/_components/button.tsx
• src/pages/posts/_components/link.tsx

Seitenexporte

• Erforderliche Seitenkomponente export default Component() {...}
• Optionale Seitenladefunktion export const Loader = () => {...}
• Optionale Seite Action -Funktion export const Action = () => {...}
• Optional Suspense-basierte ausstehende export const Pending = () => {...}
• Optionale Fehlergrenzkomponente export const Catch = () => {...}

Beispiel

Verzeichnisstruktur

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

Überblick

Datei	Weg	Konvention
(auth)/_layout.tsx		Pfadloses Layoutgruppe
(auth)/login.tsx	/login	Regelmäßige Route
(auth)/register.tsx	/register	Regelmäßige Route
blog/_components/button.tsx		Ignorierte die Route durch ein ignoriertes Verzeichnis
blog/_components/comments.tsx		Ignorierte die Route durch ein ignoriertes Verzeichnis
blog/[...all].tsx	/blog/*	Dynamischer Catch-All-Route
blog/[slug].tsx	/blog/:slug	Dynamische Route
blog/_layout.tsx		Layout für /blog -Routen
blog/index.tsx	/blog	Indexroute
blog/tags.tsx	/blog/tags	Regelmäßige Route
docs/-[lang]/index.tsx	/docs/:lang?/index	Optionales dynamisches Routensegment
docs/-[lang]/resources.tsx	/docs/:lang?/resources	Optionales dynamisches Routensegment
docs/-en/contributors.tsx	/docs/en?/contributors	Optionales statisches Routensegment
+info.tsx	/info	Modale Route
404.tsx	*	Custom 404 (optional)
_app.tsx		Benutzerdefinierte app -Layout (optional)
_ignored.tsx		Ignorierte Route
about.tsx	/about	Regelmäßige Route
blog.wolayout.tsx	/blog/w/o/layout	Route ohne /blog -Layout
index.tsx	/	Indexroute

API

Routing

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

• <Routes /> -Dateibasierte Routing-Komponente, die im App-Eintrag gerendert werden sollen
• routes -Dateibasierte Routenbaum /Objekt, das standardmäßig unter <Routes /> Komponente verwendet wird

Routing + Code-Splitting und Faulheitsladung

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

• Verwendet anstelle von @generouted/react-router oder @generouted/solid-router um faul laden zu lassen
• Stellen Sie src/pages/_app.tsx
• Bietet die gleichen <Routes /> und routes Exporte

Plugins

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

• VITE-Plugin für die Typenerzeugung und Initialisierung von Typ-Safe-Komponenten/Hooks/Utils
• Generiert src/router.ts Datei
• Exporte Typ-Safe <Link> , <Navigate> , useModals() , useNavigate() , useParams() , redirect() usw.
• Weitere Informationen finden Sie unter @generouted/react-router -Dokumente oder @generouted/solid-router -Dokumente

Kern

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

• Für die Anpassung verfügbar. Es wird jedoch empfohlen, das verfügbare Integrationsverzeichnis über die <Routes/> -Komponente zu verwenden
• Schauen Sie sich das benutzerdefinierte Integrationsbeispiel an

FAQ

Wie implementieren Sie geschützte oder bewachte Routen?

Es gibt mehrere Ansätze, um dies zu erreichen. Wenn Sie es vorziehen, die Logik an einem Ort zu behandeln, können Sie die geschützten Routen mit der Umleitungsbehandlung innerhalb einer Komponente definieren:

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

Verwenden Sie dann diese Komponente ( <Redirects> ) am Root-Level-Layout src/pages/_app.tsx um die <Outlet> -Komponente zu wickeln:

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

Sie können ein vollständiges Beispiel für diesen Ansatz bei Render Vorlage finden

Wie benutze ich mit Hash- oder Speicherroutern?

Sie können das Objekt für exportierte routes verwenden, um den Router anzupassen oder Hash/Memory -Router zu verwenden:

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

Lizenz

MIT