fix(route-not-found): Correctly render route not found page when missing trailing slash (#87244)

To reproduce, go to a missing route page without a trailing slash, like:
https://sentry.sentry.io/issues/123/abc. You will see a blank page.

For whatever reason, the `router.replace` was not doing anything.
Switching to `navigate` however, does work as expected.

Author: malwilley

static/app/views/routeNotFound.tsx

@@ -8,11 +8,13 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import Sidebar from 'sentry/components/sidebar';
 import {t} from 'sentry/locale';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import {useLastKnownRoute} from 'sentry/views/lastKnownRouteContextProvider';
 
 type Props = RouteComponentProps;
 
-function RouteNotFound({router, location}: Props) {
+function RouteNotFound({location}: Props) {
+  const navigate = useNavigate();
   const {pathname, search, hash} = location;
   const lastKnownRoute = useLastKnownRoute();
 
@@ -21,7 +23,7 @@ function RouteNotFound({router, location}: Props) {
   useLayoutEffect(() => {
     // Attempt to fix trailing slashes first
     if (isMissingSlash) {
-      router.replace(`${pathname}/${search}${hash}`);
+      navigate(`${pathname}/${search}${hash}`, {replace: true});
       return;
     }
 
@@ -32,7 +34,7 @@ function RouteNotFound({router, location}: Props) {
       scope.setTag('lastKnownRoute', lastKnownRoute);
       Sentry.captureException(new Error('Route not found'));
     });
-  }, [pathname, search, hash, isMissingSlash, router, lastKnownRoute]);
+  }, [pathname, search, hash, isMissingSlash, lastKnownRoute, navigate]);
 
   if (isMissingSlash) {
     return null;