Unknown routes

The fallback parameter of the route-matching function withRoute(routePattern, x, y) can be used as a way to handle unknown routes:

import {A, useRoute} from 'routescape';

const routeMap = {
    intro: '/intro',
    sections: /^\/section\/(?<id>\d+)\/?$/,
};

const knownRoutes = Object.values(routeMap);

let App = () => {
    let [, withRoute] = useRoute();

    return (
        <>
            <nav>
                <A href={routeMap.intro}>Intro</A>
            </nav>
            {withRoute(routeMap.intro, (
                <main>
                    <h1>Intro</h1>
                </main>
            ))}
            {withRoute(routeMap.sections, ({id}) => (
                <main>
                    <h1>Section #{id}</h1>
                </main>
            ))}
            {withRoute(knownRoutes, null, (
                <main className="error">
                    <h1>404 Not found</h1>
                </main>
            ))}
        </>
    );
};

The last withRoute() in this example results in null (that is no content) for all known routes and renders the error content for the rest unknown routes.

🔹 withRoute() calls don't have to maintain a specific order, and the unknown route handling withRoute() doesn't have to be the last.

🔹 withRoute() calls don't have to be grouped side by side like in the example above, their collocation is not a requirement. withRoute() calls are not coupled together, they can be split across separate components and files (like any other conditionally rendered components).

← <Router> | Lazy routes →