Fix router layout runtime crash

web/src/App.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'solid-js'
+import { Component, ParentComponent } from 'solid-js'
 import { A, Route, Router } from '@solidjs/router'
 
 import styles from './css/menu.module.css';
@@ -16,19 +16,8 @@ console.log("env:", import.meta.env.MODE)
 console.log("api host:", apiHost)
 
 const App: Component = () => {
-    const pages = [
-        ['/station', 'Stations'], ['/cities', 'City analysis'], ['/latvia', 'Latvia overview'],
-        ['/database', 'Data archive'], ['/harmonie', 'HARMONIE'], ['/lvgmc-forecast', 'LVĢMC forecast'],
-    ]
     return (
-        <Router>
-            <div class="appShell">
-                <WeatherIconStub />
-                <header class={styles.header}>
-                    <A class={styles.brand} href="/"><span class={styles.brandMark}>W</span><span><strong>WeatherTool</strong><small>Weather data workspace</small></span></A>
-                    <nav aria-label="Main navigation"><ul class={styles.menu}>{pages.map(([path, label]) => <li><A href={path} activeClass={styles.active}>{label}</A></li>)}</ul></nav>
-                </header>
-                <main class="appContent">
+        <Router root={AppLayout}>
             <Route path="/" component={Home} />
             <Route path="/harmonie" component={Harmonie} />
             <Route path="/lvgmc-forecast" component={LvgmcForecast} />
@@ -36,10 +25,27 @@ const App: Component = () => {
             <Route path="/cities" component={Cities} />
             <Route path="/latvia" component={Country} />
             <Route path="/database" component={Database} />
-                </main>
-            </div>
         </Router>
     );
 };
 
+const AppLayout: ParentComponent = (props) => {
+    const pages = [
+        ['/station', 'Stations'], ['/cities', 'City analysis'], ['/latvia', 'Latvia overview'],
+        ['/database', 'Data archive'], ['/harmonie', 'HARMONIE'], ['/lvgmc-forecast', 'LVĢMC forecast'],
+    ]
+    return (
+        <div class="appShell">
+                <WeatherIconStub />
+                <header class={styles.header}>
+                    <A class={styles.brand} href="/"><span class={styles.brandMark}>W</span><span><strong>WeatherTool</strong><small>Weather data workspace</small></span></A>
+                    <nav aria-label="Main navigation"><ul class={styles.menu}>{pages.map(([path, label]) => <li><A href={path} activeClass={styles.active}>{label}</A></li>)}</ul></nav>
+                </header>
+                <main class="appContent">
+                    {props.children}
+                </main>
+        </div>
+    );
+};
+
 export default App;