Skip to main content

Getting started

Welcome to Snout Router Path! 🐽

In this guide, we'll walk you through how to install Snout Router Path, create your first path pattern, match a path against your new pattern, and build a path from the same pattern. Let's dive in!

Step 1: Installation​

You can install Snout Router Path from the NPM registry using any modern package manager:

npm install @snout/router-path

Step 2: Create a path pattern​

To create a path pattern, call the path function by using it in a tagged template literal:

import { path } from "@snout/router-path";

const user = path`/user/${"id"}`;

Step 3: Use your new path pattern​

Your new path pattern can be used to check if a path matches, and determine what the path's arguments are:

user.test("/user/111"); // returns true
user.match("/user/111"); // returns { id: "111" }

It can also be used to turn a set of arguments into a path:

user.build({ id: "111" }); // returns "/user/111"

You can even try it out live right now:

tip

This embedded example doesn't have great TypeScript support.

Open the full sandbox for a better preview.

Step 4: Enjoy TypeScript goodness!​

Using TypeScript? One of the great things about Snout Router Path is the way it infers type information for your path patterns. You can have more confidence when matching and building paths, because TypeScript will warn you when you're using your patterns incorrectly:

// TypeScript "knows" that a successful match will contain an "id":

const match = user.match("/user/111");

if (match) {
  console.log(match.id); // no error
  console.log(match.nonexistent); // type error
}

// TypeScript "knows" that we need an "id" when building the path:

user.build({ id: "111" }); // no error
user.build({}); // type error
Try me!

Try this example in the TypeScript Playground

That's it!​

You're now ready to start using Snout Router Path in your application. Want to dive deeper into the features available to you? Here are some good places to start:

  • The path patterns guide covers creating path patterns, matching paths, and building paths in greater detail.
  • Learn how to create custom parameters that expand on the capabilities of Snout Router Path, while maintaining excellent TypeScript integration.
  • Check out @snout/router-path-extras for some commonly desired parameter type implementations.