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

.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/Root.tsx → cookbooks/app-react-state/src/routes/layout.tsx

@@ -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>

cookbooks/app-react-state/src/pages/Profile.tsx → cookbooks/app-react-state/src/routes/profile/index.tsx

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

cookbooks/app-react-state/src/routes/routes.ts

@@ -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;

cookbooks/app-react-state/src/pages/Todo.tsx → cookbooks/app-react-state/src/routes/todos/index.tsx

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