Add basic 404 page and *.html redirect

src/apps/experimental/routes/routes.tsx

@@ -5,6 +5,7 @@ import ConnectionRequired from 'components/ConnectionRequired';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import ErrorBoundary from 'components/router/ErrorBoundary';
+import FallbackRoute from 'components/router/FallbackRoute';
 
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
@@ -33,7 +34,13 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
 
             /* Public routes */
             { index: true, element: <Navigate replace to='/home.html' /> },
-            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)
+            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
+
+            /* Fallback route for invalid paths */
+            {
+                path: '*',
+                Component: FallbackRoute
+            }
         ]
     }
 ];

src/apps/stable/routes/routes.tsx

@@ -5,6 +5,7 @@ import ConnectionRequired from 'components/ConnectionRequired';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import ErrorBoundary from 'components/router/ErrorBoundary';
+import FallbackRoute from 'components/router/FallbackRoute';
 
 import AppLayout from '../AppLayout';
 
@@ -28,7 +29,13 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
 
             /* Public routes */
             { index: true, element: <Navigate replace to='/home.html' /> },
-            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)
+            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
+
+            /* Fallback route for invalid paths */
+            {
+                path: '*',
+                Component: FallbackRoute
+            }
         ]
     }
 ];

src/components/router/FallbackRoute.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useMemo } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+
+import loading from 'components/loading/loading';
+import Page from 'components/Page';
+import globalize from 'lib/globalize';
+import LinkButton from 'elements/emby-button/LinkButton';
+
+const FallbackRoute = () => {
+    const location = useLocation();
+
+    useEffect(() => {
+        loading.hide();
+    }, []);
+
+    // Check if the requested path should be redirected
+    const to = useMemo(() => {
+        const _to = {
+            search: location.search,
+            hash: location.hash
+        };
+
+        // If a path ends in ".html", redirect to the path with it removed
+        if (location.pathname.endsWith('.html')) {
+            return { ..._to, pathname: location.pathname.slice(0, -5) };
+        }
+    }, [ location ]);
+
+    if (to) {
+        console.warn('[FallbackRoute] You are using a deprecated URL format. This will stop working in a future Jellyfin update.');
+
+        return (
+            <Navigate
+                replace
+                to={to}
+            />
+        );
+    }
+
+    return (
+        <Page
+            id='fallbackPage'
+            className='mainAnimatedPage libraryPage'
+        >
+            <h1>{globalize.translate('HeaderPageNotFound')}</h1>
+            <p>{globalize.translate('PageNotFound')}</p>
+            <LinkButton
+                className='button-link'
+                href='#/home.html'
+            >
+                {globalize.translate('GoHome')}
+            </LinkButton>
+        </Page>
+    );
+};
+
+export default FallbackRoute;

src/strings/en-us.json

@@ -473,6 +473,7 @@
     "HeaderNoLyrics": "No lyrics found",
     "HeaderOnNow": "On Now",
     "HeaderOtherItems": "Other Items",
+    "HeaderPageNotFound": "Page not found",
     "HeaderParentalRatings": "Parental Ratings",
     "HeaderPassword": "Password",
     "HeaderPasswordReset": "Password Reset",
@@ -1315,6 +1316,7 @@
     "PackageInstallCancelled": "{0} (version {1}) installation cancelled.",
     "PackageInstallCompleted": "{0} (version {1}) installation completed.",
     "PackageInstallFailed": "{0} (version {1}) installation failed.",
+    "PageNotFound": "This is not the page you are looking for.",
     "ParentalRating": "Parental rating",
     "PasswordMatchError": "Password and password confirmation must match.",
     "PasswordRequiredForAdmin": "A password is required for admin accounts.",