Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

@generouted/react-router

Package Overview
Dependencies
2
Maintainers
1
Versions
33
Issues
File Explorer

Advanced tools

@generouted/react-router

Generated file-based routes for React Router and Vite

    1.12.0latest
    GitHub

Version published
Maintainers
1
Weekly downloads
552
decreased by-17.12%

Weekly downloads

Changelog

Source

v1.12.0

Changes

The integrations updated are generouted/react-router and generouted/solid-router. Now each integration is bundled and exported via its package namespace that was used originally only for the plugin and internal client exports.

Upgrading

The setup should be easier now, only one package to install and use @generouted/react-router or @generouted/solid-router. Installing the generouted package manually is no longer necessary:

-pnpm add @generouted/react-router generouted react-router-dom +pnpm add @generouted/react-router react-router-dom

The plugin is now accessible via /plugin and the Routes via the package index:

-import generouted from '@generouted/react-router' +import generouted from '@generouted/react-router/plugin' -import { Routes } from 'generouted/react-router' +import { Routes } from '@generouted/react-router'

Same applies to the @generouted/solid-router integration.

Commits

  • feat!: update some integrations packaging/bundling 7419745 by @oedotme closes #81, #72

Changelog: https://github.com/oedotme/generouted/compare/v1.11.7...v1.12.0

Readme

Source

Generouted + React Router + Type-safety

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

pnpm add @generouted/react-router react-router-dom

Setup

// 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()] })

Usage

// src/main.tsx import { createRoot } from 'react-dom/client' import { Routes } from '@generouted/react-router' const container = document.getElementById('app')! createRoot(container).render(<Routes />)

Adding pages

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> }

Optional root layout at pages/_app.tsx

// src/pages/_app.tsx import { Outlet } from 'react-router-dom' export default function App() { return ( <section> <header> <nav>...</nav> </header> <main> <Outlet /> </main> </section> ) }

Type-safe navigation

Autocompletion for Link, useNavigate, useParams and more exported from src/router.ts

// src/pages/index.tsx import { Link, useNavigate, useParams } from '../router' 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> ) }

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:

// src/pages/+login.tsx import { Modal } from '@/ui' export default function Login() { return <Modal>Content</Modal> }

Then render the <Modals> component in src/pages/_app.tsx, this component renders the current/opened modal component. To navigate to a modal use useModals hook exported from src/router.ts:

// src/pages/_app.tsx import { Outlet } from 'react-router-dom' import { Modals } from '@generouted/react-router' import { useModals } from '../router' export default function App() { const modals = useModals() return ( <section> <header> <nav>...</nav> <button onClick={() => modals.open('/login')}>Open modal</button> </header> <main> <Outlet /> </main> <Modals /> </section> ) }

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

Keywords

FAQs

Last updated on 28 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc