Skip to content

createRoutesView

Creates a Solid component that renders the selected opened route view.

The binding matrix covers path and virtual routes, parent/child suppression, nested Router targets, declarative sibling priority, persistent layouts, and lazy views with the same recursive children contract.

API

ts
function createRoutesView(props: {
  routes: RouteView[];
  otherwise?: Component;
}): Component;

Usage

tsx
import { createRouteView, createRoutesView } from '@effector/router-solid';

const RoutesView = createRoutesView({
  routes: [
    createRouteView({ route: homeRoute, view: HomePage }),
    createRouteView({ route: profileRoute, view: ProfilePage }),
  ],
  otherwise: () => <h1>Not found</h1>,
});

The component uses useOpenedViews, removes an active parent when its child is active, and renders the last remaining view in the supplied array. When no supplied view is open, a view that declares loading (its route is pending) or closed renders that component — see route view fallbacks — and otherwise here renders only when no view declares one.

Create the route-view objects and RoutesView once at module scope so their identities remain stable. Add RouterProvider when rendered descendants use router context; createRoutesView itself reads the supplied route units directly.

Released under the MIT License.