React Router Typesafe

React Router Typesafe is a minimal (235 bytes gzipped) patch built upon react-router to add type-safety via the use of generics. It brings type functionality closer to Remix, the full-stack framework from the same authors.

Getting Started

Install the package:

npm install react-router-typesafe

Replace your imports from react-router to react-router-typesafe:

- import { defer, useLoaderData, useActionData } from "react-router";
+ import { defer, useLoaderData, useActionData } from "react-router-typesafe";

Usage

useLoaderData / useActionData

import { useLoaderData, useActionData, LoaderFunction, ActionFunction } from 'react-router-typesafe';

const loader = (() => ({ message: 'Hello World' })) satisfies LoaderFunction;

const action = (() => ({ ok: true })) satisfies ActionFunction;

const Component = () => {
	const data = useLoaderData<typeof loader>();
	const actionData = useActionData<typeof action>();

	return <div>{data.message}</div>;
};

Warning Do not annotate the type of the loader/action function. It will break the type-safety. Instead rely on either the satisfies keyword from Typescript 4.9 onwards, or the makeLoader / makeAction utilities proveded by this library.

Utilities

makeLoader / makeAction

The makeLoader and makeAction utils replace the need for the satisfies keyword without adding any runtime overhead.

import { makeLoader, makeAction } from 'react-router-typesafe';

const loader = makeLoader(() => ({ message: 'Hello World' }));

const action = makeAction(() => ({ ok: true }));

typesafeBrowserRouter ❇️ NEW

The typesafeBrowserRouter is a wrapper around createBrowserRoute that returns a href function in addition to the routes.

It’s easy to incrementally adopt, and you can use href anywhere, not just in <Link> components.

Set up your routes like this:

- import { createBrowserRouter } from "react-router-dom";
+ import { typesafeBrowserRouter } from "react-router-typesafe";

- export const router = createBrowserRouter([
+ export const { router, href } = typesafeBrowserRouter([
  { path: "/", Component: HomePage },
  { path: "/projects/:projectId", Component: ProjectPage },
]);

• ✅ No need to change your existing <Link> components.
• ✅ URL params are inferred and type-checked.
• ✅ Supports query params and URL hash
• ✅ Refactor-friendly: Rename Symbol on the route path and it’ll be updated everywhere.

Then use href to generate URLs:

import { Link } from 'react-router-dom';
import { href } from './router';

const ProjectCard = (props: { id: string }) => {
	return (
		<Link to={href({ path: '/projects/:projectId', params: { projectId: props.id } })}>
			<p>Project {projectId}</p>
		</Link>
	);
};

Contributing

Feel free to improve the code and submit a pull request. If you're not sure about something, create an issue first to discuss it.

Functions

Status	Utility	Before	After
✅	defer	Response	Generic matching the first argument
	json	Response	Serialized data passed in
✅	useLoaderData	unknown	Generic function with the type of the loader function passed
✅	useActionData	unknown	Generic function with the type of the action function passed
✅	useRouteLoaderData	unknown	Generic function with the type of the loader function passed
NEW	makeLoader		Wrapper around satisfies for ergonomics
NEW	makeAction		Wrapper around satisfies for ergonomics
NEW	typesafeBrowserRouter		Extension of createBrowserRouter

Patched components

Status	Component	Before	After
✅	<Await>	children render props would be typed as any	Generic component makes render props typesafe

About

React Router is developed and maintained by Remix Software and many amazing contributors.