fix(cookbook-app-react-state): migrate routing to Fusion route DSL

Migrate app-react-state's Router.tsx from a hand-written RouteObject[]
tree to the layout/index/route DSL from
@equinor/fusion-framework-react-router/routes, matching the pattern
used by app-react-router/app-react-people/app-react-charts. Pages now
live under src/routes/ (routes.ts + layout.tsx + per-route folders).

Also fixes the sidebar active-link check in the layout, which
previously did an exact pathname match even though routes are declared
with a /* wildcard (basics/*, profile/*, todos/*) - now uses prefix
matching so a link stays active on any sub-path.

Author: odinr

.changeset/cookbook-app-react-state_route-dsl.md

@@ -0,0 +1,5 @@
+---
+"@equinor/fusion-framework-cookbook-app-react-state": patch
+---
+
+Internal: migrate routing to the Fusion route DSL (`layout`/`index`/`route` from `@equinor/fusion-framework-react-router/routes`), matching the pattern demonstrated in the router cookbook. Also fix the sidebar active-link check to match sub-paths (e.g. `/todos/*`) instead of only the exact page path.

cookbooks/app-react-state/src/Router.tsx

@@ -1,31 +1,6 @@
-import { Router as FusionRouter, type RouteObject } from '@equinor/fusion-framework-react-router';
+import { Router as FusionRouter } from '@equinor/fusion-framework-react-router';
 
-import { Basics, Home, Profile, Root, Todo } from './pages';
-
-const routes: RouteObject[] = [
-  {
-    path: '/',
-    element: <Root />,
-    children: [
-      {
-        index: true,
-        element: <Home />,
-      },
-      {
-        path: 'basics/*',
-        element: <Basics />,
-      },
-      {
-        path: 'profile/*',
-        element: <Profile />,
-      },
-      {
-        path: 'todos/*',
-        element: <Todo />,
-      },
-    ],
-  },
-];
+import routes from './routes/routes';
 
 /** Renders the application's route tree via the Fusion navigation module. */
 export default function Router() {

cookbooks/app-react-state/src/pages/index.ts

@@ -5,6 +5,10 @@ import { SyncStatusMonitor } from '../components/SyncEvents/SyncStatusMonitor';
 import { SideBar } from '@equinor/eds-core-react';
 import { home, school, settings, offline_document } from '@equinor/eds-icons';
 
+// A route is active on an exact match or on any of its `/*` sub-paths.
+const isActive = (pathname: string, path: string) =>
+  pathname === path || pathname.startsWith(`${path}/`);
+
 /** Provides the cookbook navigation and sync monitor shell. */
 export const Root = () => {
   const currentLocation = useLocation();
@@ -25,21 +29,21 @@ export const Root = () => {
               as={Link}
               to="/basics"
               label="basics"
-              active={currentLocation.pathname === '/basics'}
+              active={isActive(currentLocation.pathname, '/basics')}
             />
             <SideBar.Link
               icon={settings}
               as={Link}
               to="/profile"
               label="profile"
-              active={currentLocation.pathname === '/profile'}
+              active={isActive(currentLocation.pathname, '/profile')}
             />
             <SideBar.Link
               icon={offline_document}
               as={Link}
               to="/todos"
               label="todos"
-              active={currentLocation.pathname === '/todos'}
+              active={isActive(currentLocation.pathname, '/todos')}
             />
           </SideBar>
         </div>

…oks/app-react-state/src/pages/Basics.tsx …-react-state/src/routes/basics/index.tsxcookbooks/app-react-state/src/pages/Basics.tsx renamed to cookbooks/app-react-state/src/routes/basics/index.tsx cookbooks/app-react-state/src/pages/Basics.tsx renamed to cookbooks/app-react-state/src/routes/basics/index.tsx

@@ -1,4 +1,4 @@
-import { ProfileManager } from '../components/ProfileManager';
+import { ProfileManager } from '../../components/ProfileManager';
 
 /** Demonstrates replicated profile state. */
 export const Profile = () => {

…books/app-react-state/src/pages/Home.tsx …oks/app-react-state/src/routes/index.tsxcookbooks/app-react-state/src/pages/Home.tsx renamed to cookbooks/app-react-state/src/routes/index.tsx cookbooks/app-react-state/src/pages/Home.tsx renamed to cookbooks/app-react-state/src/routes/index.tsx

@@ -0,0 +1,12 @@
+import { index, layout, route } from '@equinor/fusion-framework-react-router/routes';
+
+export const pages = [
+  index('./index.tsx'),
+  route('basics/*', './basics/index.tsx'),
+  route('profile/*', './profile/index.tsx'),
+  route('todos/*', './todos/index.tsx'),
+];
+
+export const routes = layout('./layout.tsx', pages);
+
+export default routes;

…books/app-react-state/src/pages/Root.tsx …ks/app-react-state/src/routes/layout.tsxcookbooks/app-react-state/src/pages/Root.tsx renamed to cookbooks/app-react-state/src/routes/layout.tsx cookbooks/app-react-state/src/pages/Root.tsx renamed to cookbooks/app-react-state/src/routes/layout.tsx

@@ -1,4 +1,4 @@
-import { TodoListManager } from '../components/Todo';
+import { TodoListManager } from '../../components/Todo';
 
 /** Demonstrates a replicated task list. */
 export const Todo = () => {