not found route implemented

src/App/App.js

@@ -2,6 +2,7 @@ require('spatial-navigation-polyfill');
 const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, KeyboardNavigation, ServicesProvider, Shell } = require('stremio/services');
+const { NotFound } = require('stremio/routes');
 const { ToastProvider } = require('stremio/common');
 const CoreEventsToaster = require('./CoreEventsToaster');
 const routerViewsConfig = require('./routerViewsConfig');
@@ -9,7 +10,7 @@ const styles = require('./styles');
 
 const App = () => {
     const onPathNotMatch = React.useCallback(() => {
-        window.history.back();
+        return NotFound;
     }, []);
     const services = React.useMemo(() => ({
         keyboardNavigation: new KeyboardNavigation(),

src/routes/NotFound/NotFound.js

@@ -0,0 +1,26 @@
+const React = require('react');
+const { Image, HorizontalNavBar } = require('stremio/common');
+const styles = require('./styles');
+
+const NotFound = () => {
+    return (
+        <div className={styles['not-found-container']}>
+            <HorizontalNavBar
+                className={styles['nav-bar']}
+                title={'Page not found'}
+                backButton={true}
+                fullscreenButton={true}
+            />
+            <div className={styles['not-found-content']}>
+                <Image
+                    className={styles['not-found-image']}
+                    src={'/images/empty.png'}
+                    alt={' '}
+                />
+                <div className={styles['not-found-label']}>Page not found!</div>
+            </div>
+        </div>
+    );
+};
+
+module.exports = NotFound;

src/routes/NotFound/index.js

@@ -0,0 +1,3 @@
+const NotFound = require('./NotFound');
+
+module.exports = NotFound;

src/routes/NotFound/styles.less

@@ -0,0 +1,39 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
+.not-found-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: @color-background-dark2;
+
+    .nav-bar {
+        flex: none;
+    }
+
+    .not-found-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .not-found-image {
+            flex: none;
+            width: 12rem;
+            height: 12rem;
+            margin-bottom: 1rem;
+            object-fit: contain;
+            object-position: center;
+        }
+
+        .not-found-label {
+            flex: none;
+            font-size: 2.5rem;
+            max-height: 3.6em;
+            max-width: 60%;
+            text-align: center;
+            color: @color-secondaryvariant2-light1-90;
+        }
+    }
+}

src/routes/index.js

@@ -3,6 +3,7 @@ const Board = require('./Board');
 const Discover = require('./Discover');
 const Library = require('./Library');
 const MetaDetails = require('./MetaDetails');
+const NotFound = require('./NotFound');
 const Search = require('./Search');
 const Settings = require('./Settings');
 const Player = require('./Player');
@@ -14,6 +15,7 @@ module.exports = {
     Discover,
     Library,
     MetaDetails,
+    NotFound,
     Search,
     Settings,
     Player,