Package Exports

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 functions 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 magical $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
// You can pass any URLSearchParams init as param
$path('/posts/delete', [['id', 1], ['id', 2]]); // => /posts/delete?id=1&id=2

Checking params:

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

export const action: ActionFunction = async ({ params }) => {
  const { id } = $params("/posts/:id/update", params) // <-- It's type safe, try renaming `id` param.

  // ...
}

API

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

Command Line Options

-w: Watch for changes and automatically rebuild.

License

MIT