generouted
v1.19.9
Vite 용 파일 기반 경로를 생성했습니다
다음에 시도한 이후 파일 기반 라우팅 사용을 즐겼습니다. JS (페이지 디렉토리). VITE 및 클라이언트 측 응용 프로그램에 동일한 개념을 적용한 후 나중에 generouted 대로 포장 된 React Router를 사용하여 클라이언트 측 파일 기반 라우팅 구현을 다루는 블로그 게시물을 작성하기 시작했습니다.
오늘 generouted 많은 기능을 제공하고 여러 프레임 워크 및 라우터를 지원하며 Next.js, Remix, Expo, Docusaurus, Sveltekit 등의 아이디어와 컨벤션을 고무시킵니다.
generouted Vite의 Glob import API를 사용하여 src/pages 디렉토리 내에 경로를 나열하고 generouted 의 규칙을 기반으로 경로 트리 및 모달을 생성합니다.
또한 코드 생성을 통해 유형-안전 구성 요소/후크/유틸리티를 제공하기 위해 일부 통합에 사용할 수있는 Vite 플러그인도 있습니다.
react-router-dom 또는 @tanstack/router 와의 반응 지원? 또는 @tanstack/react-location@solidjs/router 사용하여 Solid 지원@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 and 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 문서에서 유형-안전 내비게이션 및 글로벌 모달에 대한 자세한 내용은 찾을 수 있습니다.
여기에서 문서를 확인하십시오
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/ Directory 내의 모든 파일은 해당 레이아웃으로 포장됩니다. . 전방 슬래시로 변환 할 세그먼트 사이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 , /aboutsrc/pages/-[lang]/about.tsx → /:lang?/about → /en/about , /fr/about , /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 | 길이없는 레이아웃 그룹 | |
(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/> 구성 요소를 통해 사용 가능한 통합 디렉토리를 사용하는 것이 좋습니다.이를 달성하기위한 여러 가지 방법이 있습니다. 한 곳에서 논리를 처리하는 것을 선호하는 경우 구성 요소 내에서 리디렉션 처리로 보호 된 경로를 정의 할 수 있습니다.
// 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
