DEV Community: Konstantin Podyganov

I love TypeScript! React Router Navigation with Type Safety

Konstantin Podyganov — Thu, 20 Feb 2025 23:45:43 +0000

I've been using react-router-dom for years now, and while it's great, there’s always room for improvement, especially in terms of stability and type safety. Let’s go through an evolution of how we can make navigation more robust using TypeScript.

Basic Implementation

A simple react-router-dom setup looks like this:

const router = createBrowserRouter([
  { path: "/login", element: <LoginPage /> },
  { path: "/order/:id", element: <OrderPage /> },
  // etc...
]);

We provide the router through a provider, and then use useNavigate as usual to navigate between pages:

export const LoginPage = () => {
  const navigate = useNavigate();

  const handleNavigateOrder = (id: string) => {
    navigate(`/order/${id}`);
  };

  return <>...</>;
};

This works fine in most cases, but what if we want more stability and type safety?

Moving Routes to Constants

A good first step is to extract route strings into constants. We create a constants/routes.ts file:

export const APP_ROUTES = {
  LOGIN: "/login",
  ORDER: "/order",
} as const;

Why as const? This ensures that APP_ROUTES is treated as a readonly object. Unlike using an enum, which compiles to an object at runtime, as const keeps APP_ROUTES immutable. This approach avoids unnecessary runtime overhead but also providing type safety.

Now, we use it in our navigation function:

const handleNavigateOrder = (id: string) => {
  navigate(`${APP_ROUTES.ORDER}/${id}`);
};

This is better, but something still feels off. Manually formatting the string every time? There must be a better way!

Introducing a Custom Hook for Navigation

Let’s create a useAppNavigate hook that automatically builds paths from parameters.

const buildPath = (path: string, params?: Record<string, string>): string => {
  if (!params) return path;
  return path.replace(/:(\w+)/g, (_, key) => params[key] || '');
};

export const useAppNavigate = () => {
  const navigate = useNavigate();

  return (path: string, params?: Record<string, string>) => {
    navigate(buildPath(path, params));
  };
};

This buildPath function takes a base path and a params object, replacing :param placeholders with actual values. Now we can use our hook like this:

export const LoginPage = () => {
  const navigate = useAppNavigate();

  const handleNavigateOrder = (id: string) => {
    navigate(APP_ROUTES.ORDER, { id });
  };

  return <>...</>;
};

Improving Type Safety

But wait! What if we misspell a parameter? The function will silently fail. Time to actually use TypeScript like a ~~not~~ normal person.

First, let’s ensure only valid route keys can be used:

export const useAppNavigate = () => {
  const navigate = useNavigate();

  return (path: keyof typeof ROUTES, params?: Record<string, string>) => {
    navigate(buildPath(ROUTES[path], params));
  };
};

Next, let’s define a RouteParams type that maps route keys to their expected parameters:

type RouteParams = {
  LOGIN: never;
  ORDER: { id: string };
  VIEW_ORDER: { id: string };
  CATALOG: never;
};

Now, our useAppNavigate function becomes:

export const useAppNavigate = () => {
  const navigate = useNavigate();

  return <T extends keyof RouteParams>(path: T, params?: RouteParams[T]) => {
    navigate(buildPath(ROUTES[path], params));
  };
};

Automatically Extracting Route Parameters

Let’s take it a step further and automatically extract parameters from route strings. Look at this monstruosity... But don't worry, I'm good at explaining things and put some comments for you

type ExtractParams<T extends string> =
  // Check if the route has multiple parameters separated by `/`
  T extends `${string}/:${infer Param}/${infer Rest}`
    ? { 
        // Recursively extract all parameters
        [K in Param | keyof ExtractParams<Rest>]: string 
      }
    // If there's only one parameter left to extract
    : T extends `${string}/:${infer Param}`
    ? { 
        // Capture it as a string key
        [K in Param]: string 
      }
    // If no parameters exist, return never
    : never;

So now we can extract parameters from route paths dynamically. Also we need redefine RouteParams like this:

type RouteParams = {
  [K in keyof typeof ROUTES]: ExtractParams<(typeof ROUTES)[K]>;
};

And the final version of useAppNavigate:

const buildPath = <T extends keyof RouteParams>(
  path: (typeof ROUTES)[T],
  params?: RouteParams[T]
): string => {
  if (!params) return path;
  return path.replace(/:(\w+)/g, (_, key) => {
    return params[key as keyof RouteParams[T]] as string;
  });
};

export const useAppNavigate = () => {
  const navigate = useNavigate();

  const handleNavigate = <T extends keyof RouteParams>(
    path: (typeof ROUTES)[T],
    params?: RouteParams[T]
  ) => {
    navigate(buildPath(path, params));
  };

  return handleNavigate;
};

Now, we have fully type-safe, parameterized navigation! 🎉

Make sure to keep your ROUTES in a separate file so typescript won't yell at you because of a unsupported exports or something...

That's all for today, take this snippet and refactor your navigation if you want. Thanks for reading!

Creating a Simple REST API for Storing Kittens with ElysiaJS

Konstantin Podyganov — Mon, 10 Feb 2025 08:37:27 +0000

Do you love kittens? Yes, me too! So I've decided to write a little tutorial about it. In this article, we'll build a lightweight REST API to manage kitten data using modern tools:

Bun as the runtime (a faster alternative to Node.js)
ElysiaJS as the web framework
mockup-storage for schema-based data persistence

By the way, the mockup-storage library was developed by me, so don’t hesitate to use it, create issues, and request features if you need them! 🐱

Step 1: Project Setup

1. Install Bun

First, you'll need to install Bun. Follow the official installation guide for your operating system.

2. Initialize the Project

Create a folder for your project. I'll call it kittens-api. Navigate to the folder and initialize the project:

mkdir kittens-api
cd kittens-api
npm init -y
bun add elysia mockup-storage

This will set up a new project and install the necessary dependencies: ElysiaJS for the web framework and mockup-storage for data persistence.

3. Create the Entry Point

Create an index.ts file in the src folder. This will be the entry point for our application.

mkdir src
touch src/index.ts

Step 2: Instantiate Storage

The mockup-storage library allows you to define schemas for your data, providing built-in validation and schema enforcement. Here, we'll use its APIs to set up a kittens collection.

Define the Kitten Schema

In src/index.ts, start by importing the necessary modules and defining the schema for our kitten records:

import { MockStorage, MockRecordSchema } from "mockup-storage";

// Define the schema for kittens
const kittenSchema: MockRecordSchema = {
  name: "string",  // Kitten's name (string)
  age: "number",   // Kitten's age (number)
  breed: "string", // Kitten's breed (string)
  adoptedAt: "datetime" // Adoption date (datetime)
};

// Initialize the storage with the kitten schema
const storage = new MockStorage({
  kittens: kittenSchema,
});

export default storage;

Step 3: Create the Server with ElysiaJS

With the storage initialized, let’s set up a server using ElysiaJS. This will act as the backend for our kittens API, exposing CRUD endpoints to manage the kittens collection.

Initialize the Server

Add the following code to src/index.ts to set up the Elysia server:

import { Elysia } from "elysia";

// Start the Elysia server
const app = new Elysia()
  .listen(3000)
  .get("/", () => "Welcome to the Kitten API! 🐱")
  .onStart(async () => {
    await storage.initialize(); // Initialize the storage
    console.log("🐱 Server started on http://localhost:3000");
  });

export default app;

Step 4: Implement CRUD Endpoints

Here’s how to implement each endpoint using the MockCollection APIs.

1. POST /kittens – Add a New Kitten

To add a new kitten, we’ll use the add method from the MockCollection API:

app.post("/kittens", async ({ body }) => {
  const kittens = await storage.collection("kittens");
  try {
    const newKitten = await kittens.add(body);
    return new Response(JSON.stringify(newKitten), { status: 201 });
  } catch (error) {
    return new Response(`Validation error: ${error.message}`, { status: 400 });
  }
});

2. GET /kittens – List All Kittens

Retrieve all kittens using the all method:

app.get("/kittens", async () => {
  const kittens = await storage.collection("kittens");
  return await kittens.all();
});

3. GET /kittens/:id – Get a Single Kitten

Use the get method to retrieve a kitten by its unique ID:

app.get("/kittens/:id", async ({ params: { id } }) => {
  const kittens = await storage.collection("kittens");
  const kitten = await kittens.get(id);
  return kitten || new Response("Kitten not found", { status: 404 });
});

4. PUT /kittens/:id – Update a Kitten

Use the remove and add methods to replace a record:

app.put("/kittens/:id", async ({ params: { id }, body }) => {
  const kittens = await storage.collection("kittens");
  const exists = await kittens.get(id);
  if (!exists) return new Response("Not found", { status: 404 });

  await kittens.remove(id);
  const updated = await kittens.add({ ...body, id }); // Re-add with updated data
  return updated;
});

5. DELETE /kittens/:id – Remove a Kitten

Delete a kitten using the remove method:

app.delete("/kittens/:id", async ({ params: { id } }) => {
  const kittens = await storage.collection("kittens");
  const success = await kittens.remove(id);
  return success
    ? new Response(null, { status: 204 })
    : new Response("Failed to delete", { status: 500 });
});

Step 5: Test the API

Create a Kitten

curl -X POST http://localhost:3000/kittens \
  -H "Content-Type: application/json" \
  -d '{"name": "Whiskers", "age": 2, "breed": "Tabby"}'

List All Kittens

curl http://localhost:3000/kittens

Get a Single Kitten

curl http://localhost:3000/kittens/123

Update a Kitten

curl -X PUT http://localhost:3000/kittens/123 \
  -H "Content-Type: application/json" \
  -d '{"age": 3}'

Delete a Kitten

curl -X DELETE http://localhost:3000/kittens/123

Next Steps

Add pagination to GET /kittens.
Implement search by breed or age.
Deploy the API to a Bun-compatible hosting platform.

Next time, we will add picture uploads — meanwhile, check out my library mockup-storage and its GitHub repository!

Let me know in the comments what you’d build next! 🚀

Final Project Structure

kittens-api/
├── src/
│   └── index.ts
├── .mock/               # Auto-created data directory
├── package.json
└── bun.lockb

Happy coding! 🐾