Wayfinder keeps Laravel routes type-safe in React
Freek Van der Herten shows how Spatie uses Laravel Wayfinder with React and Inertia to remove hardcoded URLs from frontend code.
Generated TypeScript functions check route parameters and controller calls during the build, and a Vite plugin refreshes them as the backend changes. The practical examples make the package’s value clear for Laravel teams.
Freek Van der Herten presents Wayfinder in the context of There There, a Spatie helpdesk created after two decades of running support for open-source projects and SaaS applications. The product uses Laravel and Inertia and is in private beta. Its AI assists support agents, with people retaining control of the conversation and the model polishing replies.
import {
add as addTeamMember,
remove as removeTeamMember,
} from '@/routes/app/settings/workspace/teams/members';
removeTeamMember.url({ team: team.ulid, user: member.ulid });
addTeamMember.url({ team: team.ulid, user: member.ulid });React applications often scatter URLs across fetch calls, form actions, and links. A renamed Laravel route or a newly required parameter can reach production without a compile-time warning. Wayfinder generates a function for every named route, and its .url() method builds the address with checked parameters. If a route parameter changes from user to member, TypeScript flags the affected callers. Route names also become import paths, which makes them easier to find through editor autocomplete.
Controllers receive generated functions as well. The example uses MessageRetryController with fetch and a POST request to retry a failed outbound message. Renaming the PHP controller breaks the TypeScript build. The @laravel/vite-plugin-wayfinder plugin watches Laravel routes and controllers during development and regenerates the functions after changes. Van der Herten reports fewer bugs from route changes. Fetch calls no longer return unexpected 404s, and arguments about trailing slashes have faded.
Readers’ Forum
No contributions yet — open the debate.
Open the discussion
No account or password needed — just enter your e-mail and we’ll send you a one-time sign-in link. First time here? You’re set up automatically.
Your rating will be applied automatically after you sign in.
Check your inbox
We’ve sent a sign-in link to …. Open it on this device — this tab will sign you in automatically.
Nothing arrived? Check your spam folder — and mark the mail as "Not spam" so it lands in your inbox next time.