Package Exports

remix-routes
remix-routes/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (remix-routes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

remix-routes

remix-routes automatically generates typesafe helper function for manipulating internal links in your Remix apps.

Screenshot

Installation

Using pnpm:

$ pnpm add remix-routes

Using yarn:

$ yarn add remix-routes

Using npm:

$ npm add remix-routes

Setup

package.json

{
  "scripts": {
    "build": "remix-routes && remix build",
    "dev": "concurrently \"remix-routes -w\" \"remix dev\""
  }
}

Usage

import type { ActionFunction } from 'remix';
import { redirect } from 'remix';
import { $path } from 'remix-routes'; // <-- Import magic $path helper from remix-routes.

export const action: ActionFunction = async ({ request }) => {
  let formData = await request.formData();
  const post = await createPost(formData);

  return redirect($path('/posts/:id', { id: post.id })); // <-- It's type safe.
};

Appending query string:

import { $path } from 'remix-routes';

$path('/posts/:id', { id: 6 }, { version: 18 }); // => /posts/6?version=18
$path('/posts', { limit: 10 }); // => /posts?limit=10

API

$path(path: string, params: { [key: string]: string | number }, query?: { [key: string]: string | number })
$path(path: string, query?: { [key: string]: string | number })

Command Line Options

-w: Watch for changes and automatically rebuild.

License

MIT