spa

Client-rendered application routing for Remix. It connects a standard fetch router to the browser component runtime without exposing the response carrier used to associate route responses with Remix nodes.

Features

• Standard fetch routing - Preserve Request to Response dispatch, redirects, status codes, headers, middleware, and cancellation
• Node rendering middleware - Render RemixNode values through context.render()
• Browser runtime - Resolve the current URL and future frame navigations through the router
• Initial fallback - Display an interactive Remix node while the first route loads

Installation

npm i remix

Usage

Install render() before middleware and route handlers that use context.render(), then pass the router to run().

import { createRouter } from 'remix/router'
import { get, route } from 'remix/routes'
import { render, run } from 'remix/spa'

const routes = route({
  home: get('/'),
  about: get('/about'),
})

const router = createRouter({
  middleware: [render()],
  defaultHandler({ render }) {
    return render(<h1>Not Found</h1>, { status: 404 })
  },
})

router.map(routes, {
  actions: {
    home({ render }) {
      return render(<h1>Home</h1>)
    },
    about({ render }) {
      return render(<h1>About</h1>)
    },
  },
})

const app = run(router, { fallback: <p>Loading…</p> })
await app.ready()

The router remains an ordinary fetch router, so its normal actions, controllers, middleware, and context typing continue to apply.

Wrapping Route Content

Pass a request-aware transform to render() when every route should share an application shell.

const router = createRouter({
  middleware: [
    render((content, { url }) => (
      <main data-pathname={url.pathname}>
        <nav>{/* ... */}</nav>
        {content}
      </main>
    )),
  ],
})

Related Packages

• fetch-router - Request routing, controllers, and middleware context
• render-middleware - Request-scoped renderer middleware
• component - Remix components, frames, and browser runtime

Related Work

• Fetch standard - The request and response model preserved by SPA routers
• Navigation API - Browser navigation lifecycle used by the Remix component runtime

License

See LICENSE