generouted

Generouted allows you to create global modals by prefixing a route file name with a plus sign + (e.g., src/pages/+login.tsx). These modals overlay the current route.

To control modals, use the useModals hook exported from src/router.ts. The open and close methods are type-safe and support an at option to specify which route the modal should be associated with when opening or closing.

// src/pages/+login.tsx

import { Modal } from '@/ui'

export default function Login() {
  return <Modal>Content</Modal>
}

// src/pages/_app.tsx

import { Outlet } from '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>
    </section>
  )
}

You can create global modal routes by prefixing a file name in src/pages/ with a plus sign +. For example, src/pages/+login.tsx defines a modal route.

To control modals, use the useModals hook imported from src/router.ts. This hook provides open and close methods that are type-safe and support an at option to specify which route the modal should be active on.

• modals.open(path, options)
• modals.close(options)

The options object includes an at property, which accepts a valid route path.

// src/pages/+login.tsx

import { Modal } from '@/ui'

export default function Login() {
  return <Modal>Content</Modal>
}

// src/pages/_app.tsx

import { ParentProps } from 'solid-js'
import { useModals } from '../router'

export default function App(props: ParentProps) {
  const modals = useModals()

  return (
    <section>
      <header>
        <nav>...</nav>
        <button onClick={() => modals.open('/login')}>Open modal</button>
      </header>

      <main>{props.children}</main>
    </section>
  )
}

// Example usage of 'at' option:
// modals.open('/login', { at: '/auth', replace: true })
// modals.open('/info', { at: '/invoice/:id', params: { id: 'xyz' } })
// modals.close({ at: '/', replace: false })

Generouted uses a file-system based routing convention located in src/pages. It supports .tsx, .jsx, and .mdx extensions.

Route Types

• Index routes: src/pages/index.tsx maps to /. src/pages/posts/index.tsx maps to /posts.
• Nested routes: src/pages/posts/2022/index.tsx maps to /posts/2022.
• Dynamic routes: src/pages/posts/[slug].tsx maps to /posts/:slug.
• Catch-all routes: src/pages/posts/[...all].tsx maps to /posts/*.
• Pathless layouts: Wrap a directory in parentheses () to create a layout that doesn't affect the URL path. Example: src/pages/(auth)/login.tsx maps to /login.
• Global modals: Prefix a filename with + to create a modal route. Example: src/pages/+info.tsx maps to /info. Use the useModals() hook to navigate.
• Optional segments: Prefix a segment with - to make it optional. Example: src/pages/-[lang]/about.tsx maps to /:lang?/about (matches /en/about or /about).
• Ignored routes: Any file or directory starting with an underscore _ is ignored by the router. Example: src/pages/_components/.
• Nested URLs without layouts: Use dots . between segments to create nested URLs without a corresponding layout directory. Example: src/pages/posts.nested.tsx maps to /posts/nested.

To implement protected routes, create a redirection component that checks authentication state and wrap your root-level layout (src/pages/_app.tsx) with it.

Example Implementation

1. Define the redirection logic:

// src/config/redirects.tsx
import { Navigate, useLocation } from 'react-router'
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
}

2. Wrap the <Outlet /> in src/pages/_app.tsx:

// src/pages/_app.tsx
import { Outlet } from 'react-router'
import { Redirects } from '../config/redirects'

export default function App() {
  return (
    <section>
      <header>...</header>
      <main>
        <Redirects>
          <Outlet />
        </Redirects>
      </main>
    </section>
  )
}