feat: react router error handling for 404s

server/server.ts

@@ -59,6 +59,7 @@ export default function GetNodeServer(config: CustomConfig, blaiseApi: BlaiseApi
     if (!fs.existsSync(indexFilePath)) {
         indexFilePath = path.join(__dirname, "../public/index.html");
     }
+
     server.get("*", function (_req: Request, res: Response) {
         res.render(indexFilePath);
     });

src/App.tsx

@@ -12,6 +12,7 @@ import { User } from "blaise-api-node-client";
 import { Authenticate } from "blaise-login-react/blaise-login-react-client";
 import UserProfile from "./pages/users/UserProfileEdits/UserProfile";
 import ChangeRole from "./pages/users/UserProfileEdits/ChangeRole";
+import PageNotFound from "./Components/PageNotFound";
 
 const divStyle = {
     minHeight: "calc(67vh)"
@@ -56,6 +57,9 @@ function App(): ReactElement {
                                         <Home />
                                     </ErrorBoundary>
                                 }/>
+                                <Route path="*" element={
+                                    <PageNotFound />
+                                }/>
                             </Routes>
                         </DefaultErrorBoundary>
                     </div>

src/Components/PageNotFound.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function PageNotFound() {
+    return (<>
+        <div className="ons-page__container ons-container">
+            <div className="ons-grid">
+                <div className="ons-grid__col ons-col-12@m ">
+                    <main id="main-content" className="ons-page__main ">
+                        <h1>Page not found</h1>
+                        <p>If you entered a web address, check it is correct.</p>
+                        <p>If you pasted the web address, check you copied the whole address.</p>
+                        <p>If the web address is correct, or you selected a link or button, <a href="#0">contact us</a>.</p>
+                    </main>
+                </div>
+            </div>
+        </div>
+    </>);
+}