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,29 +16,35 @@ console.log("env:", import.meta.env.MODE)
 console.log("api host:", apiHost)
 
 const App: Component = () => {
+    return (
+        <Router root={AppLayout}>
+            <Route path="/" component={Home} />
+            <Route path="/harmonie" component={Harmonie} />
+            <Route path="/lvgmc-forecast" component={LvgmcForecast} />
+            <Route path="/station" component={Station} />
+            <Route path="/cities" component={Cities} />
+            <Route path="/latvia" component={Country} />
+            <Route path="/database" component={Database} />
+        </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 (
-        <Router>
-            <div class="appShell">
+        <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">
-                <Route path="/" component={Home} />
-                <Route path="/harmonie" component={Harmonie} />
-                <Route path="/lvgmc-forecast" component={LvgmcForecast} />
-                <Route path="/station" component={Station} />
-                <Route path="/cities" component={Cities} />
-                <Route path="/latvia" component={Country} />
-                <Route path="/database" component={Database} />
+                    {props.children}
                 </main>
-            </div>
-        </Router>
+        </div>
     );
 };