Laravel Wayfinder Brings Type-Safe Routes to React and TypeScript

Laravel Wayfinder generates typed TypeScript functions for every route and controller in your Laravel app, so a React frontend no longer needs to hardcode backend URLs. The Spatie team uses it to build There There, their new helpdesk made with Laravel and Inertia. The result: a whole category of bugs has disappeared from their work.

The problem with hardcoded URLs in React

A React codebase fills up with URL strings very quickly. Every fetch, form action, and link points to a route through a template literal. Once a route in Laravel is renamed or gains a new required parameter, nothing fails at compile time. You only find out in production, or when a teammate clicks the wrong thing.

How Laravel Wayfinder works

Wayfinder creates one function for every named route. You import the function, then call .url() to build the URL. In There There, the example is the team membership toggle: the add and remove functions are imported from the routes path for members, then called with the team and user parameters.

The Spatie team points out two main benefits:

• Parameters are type-checked. If you rename the user route parameter to member, TypeScript flags every caller right away.
• Route names map cleanly to import paths. Finding them is just a matter of autocomplete.

Wayfinder also generates typed functions for every controller. Spatie uses them when calling endpoints through plain fetch, outside of an Inertia visit. One example is the retry action for an outbound message that failed to send: MessageRetryController.url() is called with the ticket and message parameters, then sent with the POST method. The URL is type-safe and the parameters are checked. If you rename the controller in PHP, the TypeScript build breaks instead of production.

Hooking it into Vite

To make it work, Wayfinder is installed as a Vite plugin. You import wayfinder from @laravel/vite-plugin-wayfinder, then add wayfinder() to the plugins list in vite.config.js. During development, the plugin watches your Laravel routes and controllers and regenerates the typed functions whenever something changes. Imports stay in sync with the backend without any manual step.

According to the Spatie team, there is no more grepping the whole codebase when a route changes, no more wondering why a fetch returns 404, and no more arguing about trailing slashes. You write the route in Laravel, import it in TypeScript, and the two keep each other honest. The full details are in the Wayfinder repo on GitHub.

If you build apps with Laravel and React or Inertia, Wayfinder is worth a try, especially if your project's route structure changes often. There There itself is still in private beta, and early access applications are open at there-there.app.