generouted

Generado

Rutas generadas basadas en archivos para VITE

Motivación

Disfruté usando el enrutamiento basado en archivos desde que probé next.js (directorio de páginas). Después de aplicar el mismo concepto con aplicaciones VITE y del lado del cliente, comencé a escribir publicaciones de blog que cubren la implementación del enrutamiento basado en archivos del lado del cliente con React Router que se empaquetó más tarde como generouted .

Hoy generouted trae muchas características, admite múltiples marcos y enrutadores e inspira ideas y convenciones de Next.js, Remix, Expo, Docusaurus, Sveltekit y más.

¿Cómo funciona?

generouted utiliza la API de importación del global de Vite para enumerar las rutas dentro del directorio src/pages y genera el árbol de rutas y los modales basados en las convenciones de generouted .

También hay complementos VITE disponibles para algunas integraciones para proporcionar componentes/ganchos/utilizos seguros a través de la generación de códigos.

Características

• ? Enrutamiento basado en archivos del lado del cliente
• ⚡ Impulsado por Vite
• React Support con react-router-dom o @tanstack/router ? o @tanstack/react-location
• Soporte sólido con @solidjs/router
• Rutas MDX basadas en archivos con React o Solid, requiere @mdx-js/rollup instalación y configuración
• ? Navegación tipo segura
• Modales globales tipo seguro
• ? División de código basada en ruta y carga perezosa
• ? Cargadores y acciones de datos basados en rutas
• ? Límite de error basado en rutas
• Diseños anidados
• ? Grupos de diseño sin senderos
• ❓ Rutas estáticas y dinámicas opcionales
• ? Rutas ignoradas por archivo o directorio

Explorador en línea

• ⚡ Visite el patio interactivo de generouted a través de Stackblitz
• ? Explore los patrones y convenciones de enrutamiento basados en archivos
• ? Visualizar los diseños de rutas y las rutas de rutas resueltas
• Actualizar src/pages/ archivos y ver sus cambios reflejando

Empezando

Enrutador reaccionado

Enrutador reaccionado

En caso de que no tenga un proyecto VITE con React y TypeScript, consulte la documentación VITE para iniciar un nuevo proyecto.

Instalación

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

Configuración

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

Uso

 // src/main.tsx

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

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

Agregar páginas

Agregue la página de inicio creando un nuevo archivo src/pages/index.tsx → / , luego exporte un componente predeterminado:

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

Verifique la sección de convenciones de enrutamiento a continuación.

Documento

Puede encontrar más detalles sobre la navegación tipo segura y los modales globales en @generouted/react-router docs.

Ejemplos

• Navegación tipo segura + modales globales
• Integración personalizada
• Integración personalizada con ruta personalizada
• Rutas MDX

Enrutador sólido

Enrutador sólido

En caso de que no tenga un proyecto VITE con sólido y mecanografiado, consulte la documentación VITE para iniciar un nuevo proyecto.

Instalación

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

Configuración

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

Uso

 // src/main.tsx

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

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

Agregar páginas

Agregue la página de inicio creando un nuevo archivo src/pages/index.tsx → / , luego exporte un componente predeterminado:

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

Vea más sobre las convenciones de enrutamiento generouted a continuación.

Documento

Puede encontrar más detalles sobre la navegación tipo segura y los modales globales en los documentos de @generouted/solid-router .

Ejemplos

• Navegación tipo segura + modales globales

Tanstack React Router-¿Soporte experimental en progreso?

Tanstack React Router-¿Soporte experimental en progreso?

Mira los documentos aquí

Ejemplos

• Básico

Ubicación reaccionada - desaprobado

Ubicación reaccionada - desaprobado

En caso de que no tenga un proyecto VITE con React y TypeScript, consulte la documentación VITE para iniciar un nuevo proyecto.

Instalación

pnpm add generouted @tanstack/react-location

Uso

 // src/main.tsx

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

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

Agregar páginas

Agregue la página de inicio creando un nuevo archivo src/pages/index.tsx → / , luego exporte un componente predeterminado:

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

Ejemplos

• Básico
• Cargadores de datos
• Modales
• Diseños anidados

Convenciones

Archivo y directorios Naming y convenciones

• Declaración de rutas en src/pages
• Admite extensiones de archivo .tsx , .jsx y .mdx
• src/pages/_app.tsx opcional para un diseño de nivel de aplicación
• src/pages/404.tsx opcional para una página no cubierta personalizada

Rutas de índice

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

Rutas anidadas

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

Rutas dinámicas

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

Diseños anidados

• Definiendo _layout.tsx en cualquier directorio anidado → src/pages/posts/_layout.tsx
• Requiere usar un componente <Outlet /> para representar a los niños de diseño
• Todos los archivos dentro del directorio src/pages/posts/ En este caso se envolverán con ese diseño

URL anidadas sin diseños anidados

• El archivo de ruta debe estar fuera del directorio de diseño anidado
• Incluir puntos . entre los segmentos a convertir en barras hacia adelante
• src/pages/posts.nested.as.url.not.layout.tsx → /posts/nested/as/url/not/layout

Diseños sin senderos

• Similar a los diseños anidados para la definición de diseño
• Envolviendo el directorio principal con paréntesis ()
• src/pages/(auth)/_layout.tsx
• src/pages/(auth)/login.tsx → /login
• Diseño El nombre del directorio de padres no está incluido en las rutas de rutas

Modales globales

• Al prefijo el nombre del archivo con un signo más + (pensando que el modal es una ruta adicional que superpone la ruta actual)
• Navegación de modales disponibles a través del gancho useModals()
• src/pages/+info.tsx → /info
• src/pages/+checkout/+details.tsx → /checkout/details
• src/pages/+checkout/+payment.tsx → /checkout/payment

Segmentos opcionales

• Prefijo un segmento de ruta con un signo menos - (pensando que el segmento puede restarse o eliminarse de la ruta de ruta)
• src/pages/-en/about.tsx → /en?/about → /en/about , /about
• src/pages/-[lang]/about.tsx → /:lang?/about → /en/about , /fr/about , /about

Rutas ignoradas

• Cualquier directorio o archivo comienza con un subrayador _ se ignorará
• src/pages/_ignored.tsx
• src/pages/posts/_components/button.tsx
• src/pages/posts/_components/link.tsx

Exportaciones de páginas

• Componente de página requerido export default Component() {...}
• Función de cargador de página opcional export const Loader = () => {...}
• Función de acción de página opcional export const Action = () => {...}
• Componente pendiente opcional basado en suspenso export const Pending = () => {...}
• Componente de límite de error opcional export const Catch = () => {...}

Ejemplo

Estructura de directorio

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

Descripción general

Archivo	Camino	Convención
(auth)/_layout.tsx		Grupo de diseño sin senderos
(auth)/login.tsx	/login	Ruta regular
(auth)/register.tsx	/register	Ruta regular
blog/_components/button.tsx		Ruta ignorada por un directorio ignorado
blog/_components/comments.tsx		Ruta ignorada por un directorio ignorado
blog/[...all].tsx	/blog/*	Ruta dinámica de atrapar
blog/[slug].tsx	/blog/:slug	Ruta dinámica
blog/_layout.tsx		Diseño para /blog
blog/index.tsx	/blog	Ruta índice
blog/tags.tsx	/blog/tags	Ruta regular
docs/-[lang]/index.tsx	/docs/:lang?/index	Segmento de ruta dinámica opcional
docs/-[lang]/resources.tsx	/docs/:lang?/resources	Segmento de ruta dinámica opcional
docs/-en/contributors.tsx	/docs/en?/contributors	Segmento de ruta estática opcional
+info.tsx	/info	Ruta modal
404.tsx	*	Personalizado 404 (opcional)
_app.tsx		Diseño de app personalizada (opcional)
_ignored.tsx		Ruta ignorada
about.tsx	/about	Ruta regular
blog.wolayout.tsx	/blog/w/o/layout	Ruta sin /blog
index.tsx	/	Ruta índice

API

Enrutamiento

A través de @generouted/react-router o @generouted/solid-router

• <Routes /> -El componente de enrutamiento basado en archivos se representará en la entrada de la aplicación
• routes : árbol /objeto de rutas basadas en archivos utilizados por defecto en <Routes /> componente

Enrutamiento + división de código y carga perezosa

A través de @generouted/react-router/lazy o @generouted/solid-router/lazy

• Usado en lugar de @generouted/react-router o @generouted/solid-router para habilitar la carga perezosa
• Asegúrese de reemplazar todas las importaciones a importaciones perezosas, a saber, en la entrada de aplicaciones y src/pages/_app.tsx
• Proporciona las mismas <Routes /> y las exportaciones routes

Complementos

A través de @generouted/react-router/plugin o @generouted/solid-router/plugin

• Complemento VITE para la generación de tipos e inicialización de componentes/ganchos seguros de tipo
• Genera el archivo src/router.ts
• Exporta Type-Safe <Link> , <Navigate> , useModals() , useNavigate() , useParams() , redirect() , etc.
• Echa un vistazo a los documentos de @generouted/react-router o @generouted/solid-router para obtener más detalles

Centro

A través de @generouted/react-router/core o @generouted/solid-router/core

• Disponible para la personalización, sin embargo, se recomienda utilizar el directorio de integraciones disponible a través del componente <Routes/>
• Consulte el ejemplo de integración personalizada

Preguntas frecuentes

¿Cómo implementar rutas protegidas o protegidas?

Hay múltiples enfoques para lograr eso. Si prefiere manejar la lógica en un solo lugar, puede definir las rutas protegidas con manejo de redirección dentro de un componente:

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

Luego use ese componente ( <Redirects> ) en el diseño a nivel raíz src/pages/_app.tsx para envolver el componente <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 >
  )
}

Puede encontrar un ejemplo completo de este enfoque en la plantilla de render.

¿Cómo usar con enrutadores hash o memoria?

Puede usar el objeto routes exportadas para personalizar el enrutador o para usar enrutadores hash/memoria:

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

Licencia

MIT