added 404 page and made every route load asynchrounously.

src/404Page.jsx

@@ -0,0 +1,28 @@
+import { h, render, Component } from "preact";
+import {
+  Container,
+  Card,
+  CardContent,
+  Typography,
+} from "@material-ui/core";
+
+class LostPage extends Component {
+  render() {
+    return (
+      <span>
+        <Container maxWidth="sm" >
+          <Card>
+            <CardContent>
+              <Typography variant="h1"> Error 404</Typography>
+              <Typography variant="body1">
+                There is no content here...
+              </Typography>
+            </CardContent>
+          </Card>
+        </Container>
+      </span>
+    );
+  }
+}
+
+export default LostPage;

src/index.jsx

@@ -13,11 +13,16 @@ class App extends Component {
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <Router>
-          <Home path="/" />
+          <AsyncRoute path="/" getComponent={() =>
-          <AsyncRoute
+            import("./Home").then((module) => module.default)
-            path="/contact"
+          }
-            getComponent={() =>
+          />
-              import("./Contact.jsx").then((module) => module.default)
+          <AsyncRoute path="/contact" getComponent={() =>
+            import("./Contact").then((module) => module.default)
+          }
+          />
+          <AsyncRoute default getComponent={() =>
+            import("./404Page").then((module) => module.default)
           }
           />
         </Router>