chore(examples): migrate vite example to React Router 7 (#6722)

docs/ProjectTemplates.mdx

@@ -98,7 +98,9 @@ A curated list of minimal project templates and examples to get started using UI
   >
     <ul>
       <li>
-        <LabelWithWrapping>Routing and Data Fetching using the createBrowserRouter of React Router</LabelWithWrapping>
+        <LabelWithWrapping>
+          Routing and Data Fetching using the createBrowserRouter of React Router v7
+        </LabelWithWrapping>
       </li>
       <li>
         <Label>Cypress Component Test setup</Label>

examples/vite-ts/package.json

@@ -20,7 +20,7 @@
     "@ui5/webcomponents-react": "~2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0"
+    "react-router": "^7.0.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

examples/vite-ts/src/AppShell.tsx

@@ -17,7 +17,7 @@ import {
   Title
 } from '@ui5/webcomponents-react';
 import { useRef, useState } from 'react';
-import { Outlet, useLocation, useMatches, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useMatches, useNavigate } from 'react-router';
 import { SingleTodoHandle } from './main.tsx';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './AppShell.module.css';

examples/vite-ts/src/ToDos.tsx

@@ -1,6 +1,6 @@
 import { BusyIndicator, Card, List, ListItemStandard } from '@ui5/webcomponents-react';
 import { Suspense } from 'react';
-import { Await, useLoaderData, useNavigate } from 'react-router-dom';
+import { Await, useLoaderData, useNavigate } from 'react-router';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './ToDos.module.css';
 

examples/vite-ts/src/TodoDetails.tsx

@@ -9,7 +9,7 @@ import {
   Switch,
   TextArea
 } from '@ui5/webcomponents-react';
-import { useLoaderData } from 'react-router-dom';
+import { useLoaderData } from 'react-router';
 import { Todo } from './mockImplementations/mockData.ts';
 import classes from './TodoDetails.module.css';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';

examples/vite-ts/src/main.tsx

@@ -3,7 +3,8 @@ import ErrorScreenIllustration from '@ui5/webcomponents-fiori/dist/illustrations
 import { BreadcrumbsItem, IllustratedMessage, ThemeProvider } from '@ui5/webcomponents-react';
 import { ReactNode, StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, defer, LoaderFunctionArgs, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, LoaderFunctionArgs } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
 import './index.css';
 import AppShell from './AppShell.tsx';
 import { fetchToDos } from './mockImplementations/mockAPIs.ts';
@@ -19,7 +20,7 @@ export interface SingleTodoHandle {
 // To simulate a slow loader increase the `delay`, to simulate a failed request set `shouldThrow` to `true`
 async function toDosLoader() {
   const todosPromise = fetchToDos({ delay: 500, shouldThrow: false });
-  return defer({ todos: todosPromise });
+  return { todos: todosPromise };
 }
 
 async function singleToDoLoader({ params }: LoaderFunctionArgs) {