generouted

Generated

Сгенерированные маршруты на основе файлов для VITE

Мотивация

Мне нравилось использовать маршрутизацию на основе файлов с тех пор, как я попробовал next.js (каталог страниц). После применения той же концепции с приложениями VITE и клиентами я начал писать сообщения в блогах, охватывающие реализацию маршрутизации на основе файлов на стороне клиента с помощью маршрутизатора React, который был упакован позже в качестве generouted .

Сегодня generouted приносит много функций, поддерживает несколько рамок и маршрутизаторов, а также вдохновляет идеи и соглашения от Next.js, Remix, Expo, Docusaurus, Sveltekit и других.

Как это работает?

generouted использует API Import VITE Glob для перечисления маршрутов в каталоге src/pages и генерирует дерева и модалы маршрутов на основе конвенций generouted .

Существуют также плагины VITE, доступные для некоторых интеграций, чтобы предоставить типовые компоненты/крючки/UTILS с помощью генерации кода.

Функции

• ? Маршрутизация на основе файлов на стороне клиента
• ⚡ Приводится в действие на 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 Docs.

Примеры

• Тип-безопасная навигация + глобальные модалы
• Пользовательская интеграция
• Пользовательская интеграция с пользовательским путем
• Маршруты MDX

Твердый маршрутизатор

Твердый маршрутизатор

Если у вас нет проекта Vite с твердым и типовым, проверьте документацию 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 Docs.

Примеры

• Тип-безопасная навигация + глобальные модалы

Tanstack React Router-экспериментальная поддержка в программе?

Tanstack 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 -Файл-маршруты Дерево /объект, используемый по умолчанию по адресу <Routes /> Component

Маршрутизация + распределение кода и ленивая загрузка

Через @generouted/react-router/lazy или @generouted/solid-router/lazy

• Используется вместо @generouted/react-router или @generouted/solid-router чтобы включить ленивую загрузку
• Обязательно замените все импорты на ленивый импорт, а именно при входе в приложение и src/pages/_app.tsx
• Обеспечивает тот же <Routes /> и routes экспорта

Плагины

Через @generouted/react-router/plugin или @generouted/solid-router/plugin

• Плагин Vite для генерации типов и инициализации типов-безопасных компонентов/крючков/utils
• Генерирует файл src/router.ts
• Экспортирует тип-safe <Link> , <Navigate> , useModals() , useNavigate() , useParams() , redirect() и т. Д.
• Проверьте @generouted/react-router Docs или @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 /> ) 

Лицензия

Грань