generouted下載 - generouted源代碼下載

generouted

Ai源碼

v1.19.9

下載

生成

生成的Vite基於文件的路由

動機

自從嘗試Next.js（頁面目錄）以來，我喜歡使用基於文件的路由。在使用VITE和客戶端應用程序應用相同的概念之後，我開始編寫博客文章，涵蓋了用React路由器實現基於客戶端的文件路由器的文章，該路由器後來包裝為generouted 。

今天的generouted帶來了許多功能，支持多個框架和路由器，並激發了Next.js，Remix，Expo，Docusaurus，Sveltekit等的想法和慣例。

它如何工作？

generouted使用Vite的Glob Import API列出src/pages目錄中的路由，並根據generouted的公約生成路由樹和模態。

還可以通過代碼生成來提供某些集成的Vite插件來提供類型安全組件/鉤/utils。

特徵

？客戶端基於文件的路由
⚡由Vite提供動力
React支持react-router-dom或@tanstack/router ？或@tanstack/react-location
@solidjs/router的堅實支持
基於文件的MDX路由具有React或固體，需要@mdx-js/rollup安裝和設置
？類型安全導航
類型安全的全局模式
？基於路由的代碼分割和懶惰加載
？基於路線的數據加載程序和操作
？基於路由的誤差邊界
嵌套佈局
？無路的佈局組
❓可選的靜態和動態路線
？忽略每個文件或目錄的路線

在線資源管理器

⚡通過Stackblitz訪問generouted的互動遊樂場
？探索基於文件的路由模式和約定
？可視化路線佈局和已解決的路線路徑
更新src/pages/ files，然後查看反映的更改

入門

反應路由器

反應路由器

如果您沒有帶有React和打字稿的Vite項目，請檢查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項目，請檢查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文檔上找到有關類型安全導航和全局模式的更多詳細信息。

例子

類型安全導航 +全局模式

Tanstack React路由器 - 進行內實驗支持？

Tanstack React路由器 - 進行內實驗支持？

在這裡查看文檔

例子

基本的

反應位置 - 棄用

反應位置 - 棄用

如果您沒有帶有React和打字稿的Vite項目，請檢查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/目錄中的所有文件都將使用該佈局包裝

沒有嵌套佈局的嵌套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 />組件

路由 +代碼拆分和懶惰加載

通過@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文件
導出類型安全<Link> ， <Navigate> ， useModals() ， useNavigate() ， useParams() ， redirect() ，等。
查看@generouted/react-router文檔或@generouted/solid-router docs有關更多詳細信息

核

通過@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
}

然後在根級佈局src/pages/_app.tsx上使用該組件（ <Redirects> ）來包裝<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 /> )