feat: 404 page redirect with toast added

public/locales/en/common.json

@@ -248,6 +248,7 @@
     "zimbabwe": "Zimbabwe"
   },
   "messages": {
+    "pageNotFound": "Page not found",
     "noResualtFound": "No result found.",
     "serverError": "Internal server error"
   }

public/locales/fa/common.json

@@ -185,6 +185,7 @@
     "zimbabwe": "زیمبابوه"
   },
   "messages": {
+    "pageNotFound": "صفحه مورد نظر پیدا نشد.",
     "noResualtFound": "نتیجه ای یافت نشد.",
     "serverError": "خطای سمت سرور"
   },

src/components/NavigateWithToast.tsx

@@ -0,0 +1,24 @@
+import { useToast, type ToastOptions } from '@rkheftan/harmony-ui';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
+
+export interface NavigateWithToastProps extends ToastOptions {
+  to: string;
+  replace?: boolean;
+  translator?: string;
+}
+
+export const NavigateWithToast = (props: NavigateWithToastProps) => {
+  const { t } = useTranslation(props.translator ?? 'common');
+  const toast = useToast();
+
+  useEffect(() => {
+    toast({
+      ...props,
+      message: t(props.message),
+    });
+  }, []);
+
+  return <Navigate to={props.to} replace={props.replace ? true : false} />;
+};

src/main.tsx

@@ -5,9 +5,9 @@ import App from './App';
 import { AppProviders } from './providers/AppProvider';
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <AppProviders>
-      <App />
-    </AppProviders>
-  </StrictMode>,
+  // <StrictMode>
+  <AppProviders>
+    <App />
+  </AppProviders>,
+  // </StrictMode>,
 );

src/routes/config.tsx

@@ -1,4 +1,5 @@
 import { Layout } from '@/components';
+import { NavigateWithToast } from '@/components/NavigateWithToast';
 import { AccountCreatedPage } from '@/features/authorization/routes/AccountCreatedPage';
 import {
   Calendar,
@@ -65,6 +66,17 @@ export interface RouteConfig {
 
 // can lazy load component if needed (ex. lazy(() => import('@/features/home/routes/HomePage'));)
 export const appRoutes: RouteConfig[] = [
+  {
+    path: '*',
+    element: (
+      <NavigateWithToast
+        to="/setting/profile"
+        replace
+        message="messages.pageNotFound"
+        severity="error"
+      />
+    ),
+  },
   {
     path: '/',
     element: <Navigate to="/setting/profile" replace />,