useRoute hook

[SantosVilanculos]

Every JS/TS router provides a useRoute hook or an equivalent. With laravel/wayfinder, we now have typed forms and links. However, a first-party Inertia.js router implementation is needed to access route parameters, name, path, etc., and to compare the current route name against a given route.

API

The useRoute hook provides access to the following properties and methods:

• params: An object containing the route parameters.
• path: The encoded pathname section of the URL.
• fullPath: The encoded URL associated with the current route, including path, query, and hash.
• query: An object containing query parameters.
• hash: The decoded hash section of the URL, starting with a #.
• name: The unique name for the route record.
• named: A method to determine if the current request was routed to a given named route.

Working Example

React Frontend

import { usePage } from '@inertiajs/react';
import * as React from 'react';

type RouteParams = Record<string, unknown>;
type RouteQuery = Record<string, unknown>;

interface Route<TParams extends RouteParams = RouteParams, TQuery extends RouteQuery = RouteQuery> {
    params: TParams;
    path: string;
    fullPath: string;
    query: TQuery;
    hash: string | null;
    name: string | null;
    named: (name: string) => boolean;
}

function useRoute<TParams extends RouteParams = RouteParams, TQuery extends RouteQuery = RouteQuery>(): Route<
    TParams,
    TQuery
> {
    const { props } = usePage<{
        route: {
            name: Route['name'];
            query: TQuery | null;
            params: TParams | null;
        };
    }>();

    const params = React.useMemo(() => props.route.params ?? ({} as TParams), [props.route.params]);

    const query = React.useMemo(() => props.route.query ?? ({} as TQuery), [props.route.query]);

    const named = React.useCallback(
        (name: string) => {
            if (props.route.name === null) return false;

            if (props.route.name === name) {
                return true;
            }

            if (name.endsWith('*')) {
                const prefix = name.slice(0, -1);
                return props.route.name.startsWith(prefix);
            }

            return false;
        },
        [props.route.name]
    );

    return {
        params,
        path: window.location.pathname,
        fullPath: window.location.href,
        query,
        hash: window.location.hash || null,
        name: props.route.name,
        named
    };
}

export { useRoute, type Route, type RouteParams, type RouteQuery };

Laravel Backend

<?php

declare(strict_types=1);

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    /**
     * Defines the props that are shared to the frontend.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        $route = $request->route();

        return [
            ...parent::share($request),
            'route' => [
                'params' => filled($route->originalParameters()) ? $route->originalParameters() : null,
                'query' => filled($request->query()) ? $request->query() : null,
                'name' => $route->getName(),
            ],
        ];
    }
}

References

• https://api.laravel.com/docs/12.x/Illuminate/Support/Facades/Route.html
• https://nuxt.com/docs/4.x/api/composables/use-route
• https://tanstack.com/router/v1/docs/framework/react/api/router