remix-routes

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

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