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

执照

麻省理工学院

展开

附加信息

版本 v1.19.9
类型 Ai源码
更新时间 2025-08-17
大小 248.09KB
来自于 Github