Shell applicatif

Une application de production cree souvent le router dans un petit composant shell. Ce shell lit les dependances applicatives, les passe comme contexte, enregistre l’instrumentation et dispose le router au demontage.

import { useEffect, useMemo, type JSX } from 'react';
import { useRelayEnvironment } from 'react-relay';
import {
  createDevtoolsBridgeInstrumentation,
  createRouter,
  RouterRenderer,
  RoutingContext,
} from '@plumile/router';

import { getRoutes } from './routes/index.js';
import { RouteFallback } from './RouteFallback.js';
import { RoutePendingBar } from './RoutePendingBar.js';

export function RouterShell(): JSX.Element {
  const relayEnvironment = useRelayEnvironment();

  const routes = useMemo(() => getRoutes(), []);
  const devtools = useMemo(() => createDevtoolsBridgeInstrumentation(), []);
  const context = useMemo(() => ({ relayEnvironment }), [relayEnvironment]);

  const router = useMemo(
    () =>
      createRouter(routes, {
        context,
        instrumentations: [devtools],
      }),
    [context, devtools, routes],
  );

  useEffect(() => {
    return () => router.cleanup();
  }, [router]);

  return (
    <RoutingContext.Provider value={router.context}>
      <RouterRenderer
        enableTransition
        fallback={<RouteFallback />}
        pending={<RoutePendingBar />}
      />
    </RoutingContext.Provider>
  );
}

Utilisez context pour les dependances dont les fonctions prepare ont besoin, comme l’environnement Relay. Utilisez pending pour le feedback de transition et fallback comme fallback Suspense pendant la resolution des ressources.