URL parameters

There are two partially overlapping hooks to deal with URL parameters, such as path parameters and query parameters.

🔹 Both hooks accept typed URL patterns covered in the Type-safe routing section to deal with typed URL parameters.

🔹 useRouteMatch(location) can be used to read URL parameters from a fixed route, a RegExp pattern, or an array thereof.

import {useRouteMatch} from 'routescape';

let Section = () => {
    let {params, query} = useRouteMatch(/^\/sections\/(?<id>\d+)\/?$/);

    return (
        <section className={params.id === '1' ? 'cover' : 'regular'}>
            {/* content */}
        </section>
    );
};

🔹 useRouteState(location) can be used to read and update URL parameters of a fixed route. Similarly to React's useState(), the hook returns [state, setState] to manipulate the URL's {params, query} (which can be regarded as a form of app state).

🔹 To make sure the current location actually matches the given pattern, the boolean state.ok flag from let state = useRouteMatch(location); or let [state, setState] = useRouteState(location); can be used.

🔹 With the location parameter omitted, both hooks assume that the current location is implied.

← Lazy routes | Type-safe routing →