Published by oedotme almost 2 years ago
Initial support for react-router-dom
via code generation for type-safety features, inspired by @tanstack/react-router
.
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'
export default defineConfig({ plugins: [react(), generouted()] })
// src/main.tsx
import { createRoot } from 'react-dom/client'
import { Routes } from './routes.gen'
const container = document.getElementById('app')!
createRoot(container).render(<Routes />)
Add the home page by creating a new file src/pages/index.tsx
→ /
, then export a default component:
// src/pages/index.tsx
export default function Home() {
return <h1>Home</h1>
}
Autocompletion for Link
, useNavigate
and useParams
exported from src/route.gen.tsx
// src/pages/index.tsx
import { Link, useNavigate, useParams } from '../routes.gen'
export default function Home() {
const navigate = useNavigate()
// typeof params -> { id: string; pid?: string }
const params = useParams('/posts/:id/:pid?')
// typeof params to be passed -> { id: string; pid?: string }
const handler = () => navigate('/posts/:id/:pid?', { params: { id: '1', pid: '0' } })
return (
<div>
{/** ✅ Passes */}
<Link to="/" />
<Link to="/posts/:id" params={{ id: '1' }} />
<Link to="/posts/:id/:pid?" params={{ id: '1' }} />
<Link to="/posts/:id/:pid?" params={{ id: '1', pid: 0 }} />
{/** 🔴 Error: not defined route */}
<Link to="/not-defined-route" />
{/** 🔴 Error: missing required params */}
<Link to="/posts/:id" />
<h1>Home</h1>
</div>
)
}
Changelog: https://github.com/oedotme/generouted/compare/v1.6.14...v1.7.0
Published by oedotme almost 2 years ago
New convention for pathless layout groups and optional route segments #36
By wrapping a directory name with ()
: src/pages/(app)/...
src/pages/
├── (app)/
│ ├── _layout.tsx
│ ├── dashboard.tsx → /dashboard wrapped by (app)/_layout.tsx
│ └── item.tsx → /item wrapped by (app)/_layout.tsx
├── (marketing)/
│ ├── _layout.tsx
│ ├── about.tsx → /about wrapped by (marketing)/_layout.tsx
│ └── testimonials.tsx → /testimonials wrapped by (marketing)/_layout.tsx
└── admin/
├── _layout.tsx
└── index.tsx → /admin wrapped by admin/_layout.tsx
By prefixing a minus sign -
to a segment; meaning this segment can be subtracted/removed from route url:
src/pages/-some/thing.tsx
→ /some?/thing
src/pages/-[param]/another.tsx
→ /:param?/another
React Router v6.5.0+ supports regular and dynamic optional route segments:
src/pages/-en/about.tsx → /en?/about /en/about and /about
src/pages/-[lang]/about.tsx → /:lang?/about /en/about, /fr/about, /about
However other integration might only support optional dynamic segments:
src/pages/-[lang]/about.tsx → /:lang?/about /en/about, /fr/about, /about
Changelog: https://github.com/oedotme/generouted/compare/v1.6.13...v1.6.14
Published by oedotme almost 2 years ago
Changelog: https://github.com/oedotme/generouted/compare/v1.6.12...v1.6.13
Published by oedotme almost 2 years ago
Changelog: https://github.com/oedotme/generouted/compare/v1.6.11...v1.6.12
Published by oedotme almost 2 years ago
Changelog: https://github.com/oedotme/generouted/compare/v1.6.10...v1.6.11
Published by oedotme almost 2 years ago
Initial support for @tanstack/react-router
via code generation
pnpm add @generouted/tanstack-react-router @tanstack/react-router@beta
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import generouted from '@generouted/tanstack-react-router'
export default defineConfig({ plugins: [react(), generouted()] })
// src/main.tsx
import { createRoot } from 'react-dom/client'
import { Routes } from './routes.gen'
const container = document.getElementById('app')!
createRoot(container).render(<Routes />)
Changelog: https://github.com/oedotme/generouted/compare/v1.6.9...v1.6.10
generouted/core
can now used for integration customizationreact-location
integration only via generouted/react-location
, using it via generouted
is now removedhttps://github.com/oedotme/generouted/compare/v1.6.3...v1.6.4
Align react-location
pending and error elements naming with the route object properties pendingElement
and errorElement
also to match a recent update to the react-router
integration:
Pending
is renamed to PendingElement
Failure
is renamed to ErrorElement
.https://github.com/oedotme/generouted/compare/v1.6.2...v1.6.3
Published by oedotme almost 2 years ago
https://github.com/oedotme/generouted/compare/v1.6.1...v1.6.2
https://github.com/oedotme/generouted/compare/v1.6.0...v1.6.1
Published by oedotme almost 2 years ago
_layout
(3e0ae76), closes #13Usage with React Location should be now imported/accessed via generouted/react-location
instead of only generouted
https://github.com/oedotme/generouted/compare/v1.5.1...v1.6.0
Published by oedotme about 2 years ago
src/pages/**
file names (@oedotme).jsx
extension for _app|404
and src/pages/**
files (@oedotme)