Views and routing

loadViewForPath()

function

declare function loadViewForPath(pathName: string): Promise<ComponentType<any>>;

Loads the view the given browser path addresses.

Parameters


`pathName`	location.pathname

Returns the view component

loadView()

function

declare function loadView(name: string): Promise<ComponentType<any>>;

Loads the view with the given name and returns its default export.

The module is only fetched the first time its view is actually requested – the application registers loader functions, not modules.

Parameters


`name`	view name, e.g. “Home” or “sub/View”

Returns the view component

routeOf()

function

declare function routeOf(pathName: string): string;

Converts a browser path name into an application route.

Parameters


`pathName`	location.pathname

Returns route without leading or trailing slash, lower case. “” for the application root itself.

ViewRoute()

function

declare function ViewRoute({ route, children }: ViewRouteProps): JSX.Element;

Says which route the view below it is, for a view rendered anywhere but at its own URL: on a docs page, in a Storybook story, in a component test, several views on one page.

A view reads its injections by route – useInjection(Q_FooList) in app/grid/Sorting.tsx reads “grid/sorting/Q_FooList” – and takes the route from the location where nothing says otherwise. startup() renders a view at its own URL, so an application doesn’t need this. FixtureScope provides one from its fixture.

<ViewRoute route="grid/sorting">
    <Sorting/>
</ViewRoute>

ViewRouteProps

type

type ViewRouteProps = {
  /**
   * Route of the view below, as routeOf() gives it for the view's own URL: "grid/sorting". Slashes at either end
   * and case don't matter.
   */
  route: string;
  children: ReactNode;
};

useRoute()

function

declare function useRoute(): string;

The route of the view the calling component belongs to: the nearest ViewRoute’s, otherwise the location’s.

Rules of hooks apply.

Returns route without leading or trailing slash, lower case

urlOf()

function

declare function urlOf(route: string): string;

Returns the URL for the given route, e.g. “sub/view” -> “/app/sub/view” in production.

Parameters


`route`	route without leading slash

appBase()

function

declare function appBase(): string;

Returns the URL prefix the application is served under, with a trailing slash.

The application’s Vite base is the single source of truth here, so that the dev server and ViteIndexController agree on where the application lives and a view has the same route either way. The servlet context path is prepended because Vite knows nothing about it.

routeNames()

function

declare function routeNames(): string[];

Returns all routes that resolve to a view, sorted.

viewNames()

function

declare function viewNames(): string[];

Returns the names of all registered views, sorted.

ViewModules

type

type ViewModules = Record<string, () => Promise<unknown>>;

Map of module path to a function loading that module – exactly what import.meta.glob(pattern) returns when the eager option is not set.