Using react-router-dom

Author: gluschenko

src/Wishmaster/Views/Shared/WebView.xaml.cs

@@ -16,7 +16,7 @@ private async void WebView_Loaded(object sender, RoutedEventArgs e)
             await WebViewElement.EnsureCoreWebView2Async();
             if (WebViewElement.CoreWebView2 is not null)
             {
-                WebViewElement.CoreWebView2.Navigate("http://localhost:5080/index.html");
+                WebViewElement.CoreWebView2.Navigate("http://localhost:5080");
             }
         }
     }

src/Wishmaster/client-app/package-lock.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "dayjs": "^1.11.4",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

src/Wishmaster/client-app/package.json

@@ -1,12 +1,19 @@
 import { useState } from 'react'
 import logo from './logo.svg'
+import { BrowserRouter, Route, Link, Routes } from "react-router-dom";
+import MainPage from './Components/Pages/MainPage/MainPage';
+import SettingsPage from './Components/Pages/SettingsPage/SettingsPage';
 
 function App() {
     return (
-        <div>
-            123
-        </div>
-    )
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<MainPage />} />
+                <Route path="/settings" element={<SettingsPage />} />
+                <Route path="*" element={<div>Not found</div>} />
+            </Routes>
+        </BrowserRouter>
+    );
 }
 
 export default App

src/Wishmaster/client-app/src/App.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+interface IMainLayoutProps {
+    children?: React.ReactNode;
+}
+
+const MainLayout: React.FC<IMainLayoutProps> = (props) => {
+    return (
+        <div>
+            <div>
+                <Link to="/">Main</Link>
+                <Link to="/settings">Settings</Link>
+            </div>
+            <div>{props.children}</div>
+        </div>
+    );
+};
+
+export default MainLayout;

src/Wishmaster/client-app/src/Components/Layout/MainLayout/MainLayout.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import MainLayout from '../../Layout/MainLayout/MainLayout';
+
+const MainPage: React.FC = () => {
+    return (
+        <MainLayout>
+            <div>MAIN</div>
+        </MainLayout>
+    );
+};
+
+export default MainPage;

src/Wishmaster/client-app/src/Components/Pages/MainPage/MainPage.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import MainLayout from '../../Layout/MainLayout/MainLayout';
+
+const SettingsPage: React.FC = () => {
+    return (
+        <MainLayout>
+            <div>SETTINGS</div>
+        </MainLayout>
+    );
+};
+
+export default SettingsPage;