Fe 05 React Router

Preconditions

• React Router createBrowserRouter configured in apps/frontend/src/app/router.ts
• Page slice directory exists or will be created (FE-01 with layer=pages)

Workflow

1. Create pages/<page-slice-name>/ slice (FE-01 with layer=pages, segments=['ui'])

2. Create pages/<page-slice-name>/ui/page.tsx:

import type { FC } from 'react';

const <PageSliceName>Page: FC = () => {
  return (
    <main>
      <h1>{/* TODO: page heading */}</h1>
    </main>
  );
};

export default <PageSliceName>Page;

3. Export component from pages/<page-slice-name>/index.ts:

export { default as <PageSliceName>Page } from './ui/page';

4. Add route entry in apps/frontend/src/app/router.ts. Declare lazy at module scope (not inside the route config), then wrap in Suspense:

import { lazy, Suspense } from 'react';

// Declare at module scope (before createBrowserRouter call):
const <PageSliceName>Page = lazy(() =>
  import('../../../pages/<page-slice-name>').then((m) => ({ default: m.<PageSliceName>Page }))
);

// Add inside the createBrowserRouter routes array:
{
  path: '<routePath>',
  // If layout input provided, wrap <PageSliceName>Page in the layout component:
  element: (
    <Suspense fallback={null}>
      <<PageSliceName>Page />
    </Suspense>
  ),
  // loader: authGuardLoader,  // uncomment if authGuard: true
}

5. If authGuard: true: add a loader function that checks auth state and redirects to the login page:

import { redirect } from 'react-router-dom';

export const authGuardLoader = () => {
  const token = localStorage.getItem('auth-token'); // TODO: use actual auth store
  if (!token) return redirect('/login');
  return null;
};

6. Run pnpm -C apps/frontend typecheck

Error conditions

• E_ROUTE_DUPLICATE: Path already registered → list existing routes and ask for a new path
• E_TYPECHECK_UNAVAILABLE: typecheck script missing → run pnpm -C apps/frontend tsc --noEmit directly

Reference

See docs/project-overview.md → "FE-05 — React Router route module scaffold".