generouted
v1.19.9
Vite用の生成されたファイルベースのルート
next.js（ページディレクトリ）を試してからファイルベースのルーティングを使用して楽しんだ。 Viteおよびクライアント側のアプリケーションで同じコンセプトを適用した後、私は、 generouted後にパッケージ化されたReactルーターを使用したクライアント側のファイルベースのルーティングの実装をカバーするブログ投稿を書き始めました。
今日、 generouted多くの機能を提供し、複数のフレームワークとルーターをサポートし、next.js、リミックス、エキスポ、ドクサウルス、Sveltekitなどのアイデアと慣習を促します。
generouted 、ViteのGlob Import APIを使用して、 src/pagesディレクトリ内のルートをリストし、 generoutedの規則に基づいてルートツリーとモーダルを生成します。
また、コード生成を通じてタイプセーフコンポーネント/フック/Utilsを提供するために、いくつかの統合に使用できるViteプラグインもあります。
react-router-domまたは@tanstack/routerでサポートしますか？または@tanstack/react-location@solidjs/routerでのしっかりしたサポート@mdx-js/rollupインストールとセットアップが必要ですgeneroutedのインタラクティブな遊び場を訪問しますsrc/pages/ファイルを更新して、あなたの変更が反映されていることを確認しますReactとTypeScriptを備えた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 Docsで、タイプセーフナビゲーションとグローバルモーダルの詳細を見つけることができます。
SolidとTypeScriptを備えた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で確認できます。
こちらのドキュメントをご覧ください
ReactとTypeScriptを備えた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.tsxsrc/pages/404.tsxカスタムなしではないページの場合src/pages/index.tsx → /src/pages/posts/index.tsx → /posts src/pages/posts/2022/index.tsx → /posts/2022src/pages/posts/2022/resolutions.tsx → /posts/2022/resolutions src/pages/posts/[slug].tsx → /posts/:slugsrc/pages/posts/[slug]/tags.tsx /posts/:slug/tagssrc/pages/posts/[...all].tsx → /posts/* src/pages/posts/_layout.tsxで_layout.tsxを定義します<Outlet />コンポーネントを使用する必要がありますsrc/pages/posts/ディレクトリ内のすべてのファイルは、そのレイアウトで包まれます.フォワードスラッシュに変換されるセグメント間src/pages/posts.nested.as.url.not.layout.tsx → /posts/nested/as/url/not/layout ()でラッピングすることによってsrc/pages/(auth)/_layout.tsxsrc/pages/(auth)/login.tsx /login+でプレフィックスすることにより（モーダルは現在のルートをオーバーレイする余分なルートであると考えています）useModals()フックから利用可能なモーダルナビゲーションsrc/pages/+info.tsx → /infosrc/pages/+checkout/+details.tsx → /checkout/detailssrc/pages/+checkout/+payment.tsx → /checkout/payment - （セグメントをルートパスから差し引くか、削除できると考えています）src/pages/-en/about.tsx → /en?/about → /en/about 、 /about/about src/pages/-[lang]/about.tsx /fr/about /en/about /:lang?/about _は無視されますsrc/pages/_ignored.tsxsrc/pages/posts/_components/button.tsxsrc/pages/posts/_components/link.tsxexport 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 | Pathless Layoutグループ | |
(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 | / | インデックスルート |
@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介して
src/router.tsファイルを生成します<Link> 、 <Navigate> 、 useModals() 、 useNavigate() 、 useParams() 、 redirect()など。@generouted/react-router Docsまたは@generouted/solid-router Docsをご覧ください@generouted/react-router/coreまたは@generouted/solid-router/core
<Routes/>コンポーネントを介して利用可能な統合ディレクトリを使用することをお勧めしますそれを達成するための複数のアプローチがあります。ロジックを1つの場所で処理することを好む場合は、コンポーネント内のリダイレクト処理で保護されたルートを定義できます。
// 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 /> ) mit
