Router: add more 404s.

src/Calendars/Main.tsx

@@ -19,7 +19,7 @@ import Calendar from "./Calendar";
 import Event from "./Event";
 import LoadingIndicator from "../widgets/LoadingIndicator";
 import EventEdit from "./EventEdit";
-import PageNotFound from "../PageNotFound";
+import PageNotFound, { PageNotFoundRoute } from "../PageNotFound";
 
 import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab, itemDelete, itemSave } from "../Pim/helpers";
 import { historyPersistor } from "../persist-state-history";
@@ -220,10 +220,12 @@ export default function CalendarsMain() {
                 </div>
                 <Event item={item} />
               </Route>
+              <PageNotFoundRoute />
             </Switch>
           );
         }}
       />
+      <PageNotFoundRoute />
     </Switch>
   );
 }

src/Contacts/Main.tsx

@@ -18,7 +18,7 @@ import SearchableAddressBook from "./SearchableAddressBook";
 import Contact from "./Contact";
 import LoadingIndicator from "../widgets/LoadingIndicator";
 import ContactEdit from "./ContactEdit";
-import PageNotFound from "../PageNotFound";
+import PageNotFound, { PageNotFoundRoute } from "../PageNotFound";
 
 import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab, itemSave, itemDelete } from "../Pim/helpers";
 
@@ -183,10 +183,12 @@ export default function ContactsMain() {
                 </div>
                 <Contact item={item} />
               </Route>
+              <PageNotFoundRoute />
             </Switch>
           );
         }}
       />
+      <PageNotFoundRoute />
     </Switch>
   );
 }

src/PageNotFound.tsx

@@ -2,13 +2,26 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from "react";
+import { Route } from "react-router";
 
 import Container from "./widgets/Container";
 
+export function PageNotFoundRoute(props: { container?: boolean }) {
+  return (
+    <Route path="*">
+      {props.container ? (
+        <Container>
+          <PageNotFound />
+        </Container>
+      ) : (
+        <PageNotFound />
+      )}
+    </Route>
+  );
+}
+
 export default function PageNotFound() {
   return (
-    <Container>
+    <h1>404 Page Not Found</h1>
-      <h1>404 Page Not Found</h1>
-    </Container>
   );
 }

src/SyncGate.tsx

@@ -27,6 +27,7 @@ import { StoreState } from "./store";
 import { performSync } from "./store/actions";
 import { useCredentials } from "./credentials";
 import PimNavigationTabs from "./Pim/NavigationTabs";
+import { PageNotFoundRoute } from "./PageNotFound";
 
 export default function SyncGate() {
   const etebase = useCredentials();
@@ -98,6 +99,7 @@ export default function SyncGate() {
               <TasksMain />
             </Container>
           </Route>
+          <PageNotFoundRoute container />
         </Switch>
       </Route>
       <Route
@@ -119,6 +121,7 @@ export default function SyncGate() {
           <Debug />
         )}
       />
+      <PageNotFoundRoute container />
     </Switch>
   );
 }

src/Tasks/Main.tsx

@@ -18,7 +18,7 @@ import TaskList from "./TaskList";
 import Task from "./Task";
 import LoadingIndicator from "../widgets/LoadingIndicator";
 import TaskEdit from "./TaskEdit";
-import PageNotFound from "../PageNotFound";
+import PageNotFound, { PageNotFoundRoute } from "../PageNotFound";
 
 import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab, itemSave, itemDelete } from "../Pim/helpers";
 
@@ -185,10 +185,12 @@ export default function TasksMain() {
                 </div>
                 <Task item={item} />
               </Route>
+              <PageNotFoundRoute />
             </Switch>
           );
         }}
       />
+      <PageNotFoundRoute />
     </Switch>
   );
 }