feat: 404 page

src/App.tsx

@@ -13,6 +13,7 @@ import SectionPage from './pages/SectionPage';
 import ImpressumPage from './pages/ImpressumPage';
 import { checkLinks } from './utils/LinkChecker';
 import SearchPage from './pages/SearchPage';
+import NoMatch from './pages/NoMatch';
 import client from "./client";
 import { HelmetProvider } from 'react-helmet-async';
 
@@ -138,11 +139,14 @@ function App() {
                 <PageLayout.Content>
                   <div id="main-content" className='p-3'>
                     <Routes>
-                        <Route path="/search" element={<SearchPage page={searchPage} sections = {sections} />} />
-                        <Route path="/impressum" element={<ImpressumPage />} />
-                        <Route path="/:slug"  element={<SectionPage sections={sectionsByKey} />} />
                         <Route path="/" element={<HomePage page={startPage}/>} />
                         <Route path="/thilo/" element={ <HomePage page={startPage}/>} />
+                        <Route path="/search" element={<SearchPage page={searchPage} sections = {sections} />} />
+                        <Route path="/impressum" element={<ImpressumPage />} />
+                        {/* TODO: currently, 404 page is called by Section component because otherwise won't work */}
+                        <Route path="/:slug"  element={<SectionPage sections={sectionsByKey}/>} />
+                        {/* TODO: Below does not really do anyting, because :slug matches everything */}
+                        <Route path="*" element={<NoMatch />} />
                       </Routes>
                     <Footer />
                   </div>

src/i18n/de.json

@@ -42,6 +42,10 @@
     },
     "sideBarNav": {
       "title": "Thilo Online"
+    },
+    "noMatch": {
+      "title": "Seite nicht gefunden",
+      "body": "Die Seite unter diesem Link exisitert nicht (mehr)."
     }
   }
 }

src/pages/NoMatch.tsx

@@ -0,0 +1,22 @@
+import { Helmet } from 'react-helmet-async'
+import { withTranslation } from 'react-i18next'
+
+function noMatch(props?: any) {
+    const { t } = props
+
+    return <section className='content'>
+        <Helmet><title>Thilo - 404 - {t('noMatch.title')} </title></Helmet>
+        <div id="section-title" className={`section-title mb-2`}>
+            <h1 className={`bg-primary px-2`}>
+                404 - {t('noMatch.title')}
+            </h1>
+        </div>
+        <div className='section-body rounded p-3 color-bg-default'>
+            <div className='section-description'>
+                {t('noMatch.body')}
+            </div>
+        </div>
+    </section>
+}
+
+export default withTranslation()(noMatch)

src/pages/SectionPage.tsx

@@ -3,6 +3,7 @@ import Section from '../components/Section'
 import type { SectionT } from '../components/Section'
 import { useLocation, useParams } from 'react-router'
 import { withTranslation } from 'react-i18next'
+import NoMatch from './NoMatch'
 
 type Params = {
   slug: string
@@ -34,7 +35,8 @@ function SectionPage(props: Props) {
         if (title) title.scrollIntoView()
     }
   });
-  if (!section) return null
+  // TODO: rethink the routing so a 404 page does not have to be serve here, but in App.tsx
+  if (!section) return <NoMatch />
   return <Section section={section} />
 }
 export default withTranslation()(SectionPage)