Registering UI Routes

Springboard currently uses TanStack Router to register UI routes for the application.

There are two ways to register routes:

The module can return a routes array of tanstack router routes. These are assumed to be relative to the root route.
The moduleAPI.registerRoute function allows modules to register their own routes. This circumvents tanstack’s type safety.

import {createRoute} from '@tanstack/react-router';

springboard.registerModule('MyModule', async (moduleAPI) => {
    // matches "" and "/"
    moduleAPI.registerRoute('/', () => {
        return (
            <div/>
        );
    });

    // matches "/modules/MyModule"
    moduleAPI.registerRoute('', () => {
        return (
            <div/>
        );
    });

    // matches "/modules/MyModule/things/1"
    moduleAPI.registerRoute('things/:thingId', ({pathParams}) => {
        const thingId = pathParams.thingId;

        return (
            <div/>
        );
    });

    // matches "/users/1"
    moduleAPI.registerRoute('/users/:userId', ({pathParams}) => {
        const userId = pathParams.userId;

        return (
            <div/>
        );
    });

    return {
        routes: [
            createRoute({
                path: '/my-typed-route',
                element: () => (
                    <div/>
                ),
            }),
        ],
    };
});

Notes about ApplicationShell and any other related things

Registering React context

Overview

Docs

Jam Tools

Registering UI Routes