Gathering detailed insights and metrics for @generouted/react-router
Generated file-based routes for Vite
Installations
npm install @generouted/react-routerDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
23.7.0
NPM Version
10.9.2
Score
64.8
Supply Chain
90.7
Quality
90.6
Maintenance
50
Vulnerability
98.2
License
Releases
98
Contributors
23
Languages
4
TypeScript
JavaScript
HTML
CSS
TypeScript (97.56%)
JavaScript (1.69%)
HTML (0.66%)
CSS (0.09%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
1,071,774
Last Day
3,775
Last Week
26,048
Last Month
104,940
Last Year
896,156
GitHub Statistics
MIT License
1,120 Stars
435 Commits
60 Forks
8 Watchers
10 Branches
23 Contributors
Updated on Feb 13, 2025
Maintainers
1
Package Meta Information
Latest Version
1.20.0
Package Id
@generouted/react-router@1.20.0
Unpacked Size
41.37 kB
Size
9.34 kB
File Count
33
NPM Version
10.9.2
Node Version
23.7.0
Published on
Feb 07, 2025
Total Downloads
Cumulative downloads
Total Downloads
1,071,774
Last Day
-16.6%
3,775
Compared to previous day
Last Week
1.6%
26,048
Compared to previous week
Last Month
56.4%
104,940
Compared to previous month
Last Year
413.6%
896,156
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
3
Dev Dependencies
6
Generouted + React Router + Type-safety
Docs
Check out generouted's main docs for the features, conventions and more.
How
This integration is based on a Vite plugin to generate routes types for React Router with generouted conventions. The output is saved by default at src/router.ts and gets updated by the add/change/delete at src/pages/*.
Getting started
In case you don't have a Vite project with React and TypeScript, check Vite documentation to start a new project.
Installation
1pnpm add @generouted/react-router react-router
Setup
1// vite.config.ts 2 3import { defineConfig } from 'vite' 4import react from '@vitejs/plugin-react' 5import generouted from '@generouted/react-router/plugin' 6 7export default defineConfig({ plugins: [react(), generouted()] })
Usage
1// src/main.tsx 2 3import { createRoot } from 'react-dom/client' 4import { Routes } from '@generouted/react-router' 5// import { Routes } from '@generouted/react-router/lazy' // route-based code-splitting 6 7createRoot(document.getElementById('root')!).render(<Routes />)
Adding pages
Add the home page by creating a new file src/pages/index.tsx → /, then export a default component:
1// src/pages/index.tsx 2 3export default function Home() { 4 return <h1>Home</h1> 5}
Optional root layout at pages/_app.tsx
1// src/pages/_app.tsx 2 3import { Outlet } from 'react-router' 4 5export default function App() { 6 return ( 7 <section> 8 <header> 9 <nav>...</nav> 10 </header> 11 12 <main> 13 <Outlet /> 14 </main> 15 </section> 16 ) 17}
Type-safe navigation
Autocompletion for Link, useNavigate, useParams and more exported from src/router.ts
1// src/pages/index.tsx 2import { Link, useNavigate, useParams } from '../router' 3 4export default function Home() { 5 const navigate = useNavigate() 6 7 // typeof params -> { id: string; pid?: string } 8 const params = useParams('/posts/:id/:pid?') 9 10 // typeof params to be passed -> { id: string; pid?: string } 11 const handler = () => navigate('/posts/:id/:pid?', { params: { id: '1', pid: '0' } }) 12 13 return ( 14 <div> 15 {/** ✅ Passes */} 16 <Link to="/" /> 17 <Link to="/posts/:id" params={{ id: '1' }} /> 18 <Link to="/posts/:id/:pid?" params={{ id: '1' }} /> 19 <Link to="/posts/:id/:pid?" params={{ id: '1', pid: 0 }} /> 20 21 {/** 🔴 Error: not defined route */} 22 <Link to="/not-defined-route" /> 23 24 {/** 🔴 Error: missing required params */} 25 <Link to="/posts/:id" /> 26 27 <h1>Home</h1> 28 </div> 29 ) 30}
Type-safe global modals
Although all modals are global, it's nice to co-locate modals with relevant routes.
Create modal routes by prefixing a valid route file name with a plus sign +. Why +? You can think of it as an extra route, as the modal overlays the current route:
1// src/pages/+login.tsx 2 3import { Modal } from '@/ui' 4 5export default function Login() { 6 return <Modal>Content</Modal> 7}
To navigate to a modal use useModals hook exported from src/router.ts:
1// src/pages/_app.tsx 2 3import { Outlet } from 'react-router' 4 5import { useModals } from '../router' 6 7export default function App() { 8 const modals = useModals() 9 10 return ( 11 <section> 12 <header> 13 <nav>...</nav> 14 <button onClick={() => modals.open('/login')}>Open modal</button> 15 </header> 16 17 <main> 18 <Outlet /> 19 </main> 20 </section> 21 ) 22}
With useModals you can use modals.open('/modal-path') and modals.close(), and by default it opens/closes the modal on the current active route.
Both methods come with React Router's navigate() options with one prop added at, for optionally navigating to a route while opening/closing a modal, and it's also type-safe!
modals.open(path, options)modals.close(options)
at should be also a valid route path, here are some usage examples:
modals.open('/login', { at: '/auth', replace: true })modals.open('/info', { at: '/invoice/:id', params: { id: 'xyz' } })modals.close({ at: '/', replace: false })
Examples
React Router
License
MIT
No vulnerabilities found.
No security vulnerabilities found.