fix: infinite re-rendering of /logs/logs-explorer

change pathPattern options as well

frontend/package.json

@@ -79,7 +79,6 @@
 		"eventemitter3": "5.0.1",
 		"file-loader": "6.1.1",
 		"fontfaceobserver": "2.3.0",
-		"history": "4.10.1",
 		"html-webpack-plugin": "5.5.0",
 		"http-proxy-middleware": "3.0.3",
 		"i18next": "^21.6.12",
@@ -115,8 +114,7 @@
 		"react-markdown": "8.0.7",
 		"react-query": "3.39.3",
 		"react-redux": "^7.2.2",
-		"react-router-dom": "^5.2.0",
+		"react-router": "7.5.1",
-		"react-router-dom-v5-compat": "6.27.0",
 		"react-syntax-highlighter": "15.5.0",
 		"react-use": "^17.3.2",
 		"react-virtuoso": "4.0.3",
@@ -186,7 +184,7 @@
 		"@types/react-lottie": "1.2.10",
 		"@types/react-redux": "^7.1.11",
 		"@types/react-resizable": "3.0.3",
-		"@types/react-router-dom": "^5.1.6",
+		"@types/react-router": "^5.1.20",
 		"@types/react-syntax-highlighter": "15.5.7",
 		"@types/redux-mock-store": "1.0.4",
 		"@types/styled-components": "^5.1.4",

frontend/src/AppRoutes/Private.tsx

@@ -5,15 +5,17 @@ import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
+import { useGlobalEventListener } from 'hooks/useGlobalEventListener';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
+import { matchPath, useLocation } from 'react-router';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { Organization } from 'types/api/user/getOrganization';
 import { USER_ROLES } from 'types/roles';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 import { routePermission } from 'utils/permission';
 
 import routes, {
@@ -26,6 +28,10 @@ import routes, {
 
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+	const { safeNavigate: unsafeNavigate } = useSafeNavigate({
+		preventSameUrlNavigation: false,
+	});
 	const { pathname } = location;
 	const {
 		org,
@@ -44,9 +50,13 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		() =>
 			new Map(
 				[...routes, LIST_LICENSES, SUPPORT_ROUTE].map((e) => {
-					const currentPath = matchPath(pathname, {
+					const currentPath = matchPath(
-						path: e.path,
+						{
-					});
+							// Temp: Hard type cast
+							path: e.path as string,
+						},
+						pathname,
+					);
 					return [currentPath === null ? null : 'current', e];
 				}),
 			),
@@ -101,7 +111,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				// if the current route is allowed to be overriden by org onboarding then only do the same
 				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname)
 			) {
-				history.push(ROUTES.ONBOARDING);
+				safeNavigateNoSameURLMemo(ROUTES.ONBOARDING);
 			}
 		}
 	}, [
@@ -114,31 +124,37 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		pathname,
 	]);
 
-	const navigateToWorkSpaceBlocked = (route: any): void => {
+	const safeNavigateToWorkSpaceBlocked = useCallback(
-		const { path } = route;
+		(route: any): void => {
+			const { path } = route;
 
-		const isRouteEnabledForWorkspaceBlockedState =
+			const isRouteEnabledForWorkspaceBlockedState =
-			isAdmin &&
+				isAdmin &&
-			(path === ROUTES.ORG_SETTINGS ||
+				(path === ROUTES.ORG_SETTINGS ||
-				path === ROUTES.BILLING ||
+					path === ROUTES.BILLING ||
-				path === ROUTES.MY_SETTINGS);
+					path === ROUTES.MY_SETTINGS);
 
-		if (
+			if (
-			path &&
+				path &&
-			path !== ROUTES.WORKSPACE_LOCKED &&
+				path !== ROUTES.WORKSPACE_LOCKED &&
-			!isRouteEnabledForWorkspaceBlockedState
+				!isRouteEnabledForWorkspaceBlockedState
-		) {
+			) {
-			history.push(ROUTES.WORKSPACE_LOCKED);
+				safeNavigateNoSameURLMemo(ROUTES.WORKSPACE_LOCKED);
-		}
+			}
-	};
+		},
+		[isAdmin],
+	);
 
-	const navigateToWorkSpaceAccessRestricted = (route: any): void => {
+	const safeNavigateToWorkSpaceAccessRestricted = useCallback(
-		const { path } = route;
+		(route: any): void => {
+			const { path } = route;
 
-		if (path && path !== ROUTES.WORKSPACE_ACCESS_RESTRICTED) {
+			if (path && path !== ROUTES.WORKSPACE_ACCESS_RESTRICTED) {
-			history.push(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+				safeNavigateNoSameURLMemo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
-		}
+			}
-	};
+		},
+		[],
+	);
 
 	useEffect(() => {
 		if (!isFetchingActiveLicenseV3 && activeLicenseV3) {
@@ -157,10 +173,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				platform === LicensePlatform.CLOUD &&
 				currentRoute
 			) {
-				navigateToWorkSpaceAccessRestricted(currentRoute);
+				safeNavigateToWorkSpaceAccessRestricted(currentRoute);
 			}
 		}
-	}, [isFetchingActiveLicenseV3, activeLicenseV3, mapRoutes, pathname]);
+	}, [
+		isFetchingActiveLicenseV3,
+		activeLicenseV3,
+		mapRoutes,
+		pathname,
+		safeNavigateToWorkSpaceAccessRestricted,
+	]);
 
 	useEffect(() => {
 		if (!isFetchingActiveLicenseV3) {
@@ -172,7 +194,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				currentRoute &&
 				activeLicenseV3?.platform === LicensePlatform.CLOUD
 			) {
-				navigateToWorkSpaceBlocked(currentRoute);
+				safeNavigateToWorkSpaceBlocked(currentRoute);
 			}
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -182,15 +204,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		activeLicenseV3?.platform,
 		mapRoutes,
 		pathname,
+		safeNavigateToWorkSpaceBlocked,
 	]);
 
-	const navigateToWorkSpaceSuspended = (route: any): void => {
+	const safeNavigateToWorkSpaceSuspended = useCallback((route: any): void => {
 		const { path } = route;
 
 		if (path && path !== ROUTES.WORKSPACE_SUSPENDED) {
-			history.push(ROUTES.WORKSPACE_SUSPENDED);
+			safeNavigateNoSameURLMemo(ROUTES.WORKSPACE_SUSPENDED);
 		}
-	};
+	}, []);
 
 	useEffect(() => {
 		if (!isFetchingActiveLicenseV3 && activeLicenseV3) {
@@ -203,10 +226,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				currentRoute &&
 				activeLicenseV3.platform === LicensePlatform.CLOUD
 			) {
-				navigateToWorkSpaceSuspended(currentRoute);
+				safeNavigateToWorkSpaceSuspended(currentRoute);
 			}
 		}
-	}, [isFetchingActiveLicenseV3, activeLicenseV3, mapRoutes, pathname]);
+	}, [
+		isFetchingActiveLicenseV3,
+		activeLicenseV3,
+		mapRoutes,
+		pathname,
+		safeNavigateToWorkSpaceSuspended,
+	]);
 
 	useEffect(() => {
 		if (org && org.length > 0 && org[0].id !== undefined) {
@@ -220,13 +249,13 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			currentRoute?.path === ROUTES.GET_STARTED &&
 			featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
 		) {
-			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+			safeNavigateNoSameURLMemo(ROUTES.GET_STARTED_WITH_CLOUD);
 		}
 	}, [currentRoute, featureFlags]);
 
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
-		// if it is an old route navigate to the new route
+		// if it is an old route safeNavigate to the new route
 		if (isOldRoute) {
 			const redirectUrl = oldNewRoutesMapping[pathname];
 
@@ -234,7 +263,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				...location,
 				pathname: redirectUrl,
 			};
-			history.replace(newLocation);
+
+			safeNavigateNoSameURLMemo(newLocation, { replace: true });
 			return;
 		}
 		// if the current route
@@ -244,21 +274,21 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				if (isLoggedInState) {
 					const route = routePermission[key];
 					if (route && route.find((e) => e === user.role) === undefined) {
-						history.push(ROUTES.UN_AUTHORIZED);
+						safeNavigateNoSameURLMemo(ROUTES.UN_AUTHORIZED);
 					}
 				} else {
 					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-					history.push(ROUTES.LOGIN);
+					safeNavigateNoSameURLMemo(ROUTES.LOGIN);
 				}
 			} else if (isLoggedInState) {
 				const fromPathname = getLocalStorageApi(
 					LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
 				);
 				if (fromPathname) {
-					history.push(fromPathname);
+					safeNavigateNoSameURLMemo(fromPathname);
 					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
 				} else if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-					history.push(ROUTES.HOME);
+					safeNavigateNoSameURLMemo(ROUTES.HOME);
 				}
 			} else {
 				// do nothing as the unauthenticated routes are LOGIN and SIGNUP and the LOGIN container takes care of routing to signup if
@@ -269,17 +299,45 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
 			);
 			if (fromPathname) {
-				history.push(fromPathname);
+				safeNavigateNoSameURLMemo(fromPathname);
 				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
 			} else {
-				history.push(ROUTES.HOME);
+				safeNavigateNoSameURLMemo(ROUTES.HOME);
 			}
 		} else {
 			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-			history.push(ROUTES.LOGIN);
+			safeNavigateNoSameURLMemo(ROUTES.LOGIN);
 		}
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
 
+	// global event listener for NAVIGATE event
+	// This will provide access to useNavigation hook from outside of components
+	useGlobalEventListener(
+		'SAFE_NAVIGATE',
+		(event: CustomEvent) => {
+			const { to, options } = event.detail;
+			if (to) {
+				safeNavigate(to, options);
+			}
+		},
+		{
+			passive: true,
+		},
+	);
+
+	useGlobalEventListener(
+		'UNSAFE_NAVIGATE',
+		(event: CustomEvent) => {
+			const { to, options } = event.detail;
+			if (to) {
+				unsafeNavigate(to, options);
+			}
+		},
+		{
+			passive: true,
+		},
+	);
+
 	// NOTE: disabling this rule as there is no need to have div
 	// eslint-disable-next-line react/jsx-no-useless-fragment
 	return <>{children}</>;

frontend/src/AppRoutes/index.tsx

@@ -15,7 +15,6 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { LICENSE_PLAN_KEY } from 'hooks/useLicense';
 import { NotificationProvider } from 'hooks/useNotifications';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
-import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
 import AlertRuleProvider from 'providers/Alert';
@@ -24,9 +23,9 @@ import { IUser } from 'providers/App/types';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
-import { Route, Router, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router';
-import { CompatRouter } from 'react-router-dom-v5-compat';
 import { extractDomain } from 'utils/app';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
@@ -316,7 +315,7 @@ function App(): JSX.Element {
 		// this needs to be on top of data missing error because if there is an error, data will never be loaded and it will
 		// move to indefinitive loading
 		if (userFetchError && pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-			history.replace(ROUTES.SOMETHING_WENT_WRONG);
+			safeNavigateNoSameURLMemo(ROUTES.SOMETHING_WENT_WRONG);
 		}
 
 		// if all of the data is not set then return a spinner, this is required because there is some gap between loading states and data setting
@@ -328,40 +327,33 @@ function App(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<ConfigProvider theme={themeConfig}>
-				<Router history={history}>
+				<BrowserRouter>
-					<CompatRouter>
+					<NotificationProvider>
-						<NotificationProvider>
+						<PrivateRoute>
-							<PrivateRoute>
+							<ResourceProvider>
-								<ResourceProvider>
+								<QueryBuilderProvider>
-									<QueryBuilderProvider>
+									<DashboardProvider>
-										<DashboardProvider>
+										<KeyboardHotkeysProvider>
-											<KeyboardHotkeysProvider>
+											<AlertRuleProvider>
-												<AlertRuleProvider>
+												<AppLayout>
-													<AppLayout>
+													<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-														<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+														<Routes>
-															<Switch>
+															{routes.map(({ path, element }) => (
-																{routes.map(({ path, component, exact }) => (
+																<Route key={`${path}`} path={path} element={element} />
-																	<Route
+															))}
-																		key={`${path}`}
+															<Route path="/" element={<Home />} />
-																		exact={exact}
+															<Route path="*" element={<NotFound />} />
-																		path={path}
+														</Routes>
-																		component={component}
+													</Suspense>
-																	/>
+												</AppLayout>
-																))}
+											</AlertRuleProvider>
-																<Route exact path="/" component={Home} />
+										</KeyboardHotkeysProvider>
-																<Route path="*" component={NotFound} />
+									</DashboardProvider>
-															</Switch>
+								</QueryBuilderProvider>
-														</Suspense>
+							</ResourceProvider>
-													</AppLayout>
+						</PrivateRoute>
-												</AlertRuleProvider>
+					</NotificationProvider>
-											</KeyboardHotkeysProvider>
+				</BrowserRouter>
-										</DashboardProvider>
-									</QueryBuilderProvider>
-								</ResourceProvider>
-							</PrivateRoute>
-						</NotificationProvider>
-					</CompatRouter>
-				</Router>
 			</ConfigProvider>
 		</Sentry.ErrorBoundary>
 	);

frontend/src/AppRoutes/routes.tsx

@@ -1,6 +1,6 @@
 import ROUTES from 'constants/routes';
 import MessagingQueues from 'pages/MessagingQueues';
-import { RouteProps } from 'react-router-dom';
+import { RouteProps } from 'react-router';
 
 import {
 	AlertHistory,
@@ -65,443 +65,383 @@ import {
 
 const routes: AppRoutes[] = [
 	{
-		component: SignupPage,
 		path: ROUTES.SIGN_UP,
-		exact: true,
+		element: <SignupPage />,
 		isPrivate: false,
 		key: 'SIGN_UP',
 	},
 	{
 		path: ROUTES.GET_STARTED,
-		exact: false,
+		// exact: false
-		component: Onboarding,
+		element: <Onboarding />,
 		isPrivate: true,
 		key: 'GET_STARTED',
 	},
 	{
 		path: ROUTES.GET_STARTED_WITH_CLOUD,
-		exact: false,
+		// exact: false
-		component: OnboardingV2,
+		element: <OnboardingV2 />,
 		isPrivate: true,
 		key: 'GET_STARTED_WITH_CLOUD',
 	},
 	{
 		path: ROUTES.HOME,
-		exact: true,
+		element: <Home />,
-		component: Home,
 		isPrivate: true,
 		key: 'HOME',
 	},
 	{
 		path: ROUTES.ONBOARDING,
-		exact: false,
+		// exact: false
-		component: OrgOnboarding,
+		element: <OrgOnboarding />,
 		isPrivate: true,
 		key: 'ONBOARDING',
 	},
 	{
-		component: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,
-		exact: true,
+		element: <LogsIndexToFields />,
 		isPrivate: true,
 		key: 'LOGS_INDEX_FIELDS',
 	},
 	{
-		component: ServicesTablePage,
 		path: ROUTES.APPLICATION,
-		exact: true,
+		element: <ServicesTablePage />,
 		isPrivate: true,
 		key: 'APPLICATION',
 	},
 	{
 		path: ROUTES.SERVICE_METRICS,
-		exact: true,
+		element: <ServiceMetricsPage />,
-		component: ServiceMetricsPage,
 		isPrivate: true,
 		key: 'SERVICE_METRICS',
 	},
 	{
 		path: ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
-		exact: true,
+		element: <ServiceTopLevelOperationsPage />,
-		component: ServiceTopLevelOperationsPage,
 		isPrivate: true,
 		key: 'SERVICE_TOP_LEVEL_OPERATIONS',
 	},
 	{
 		path: ROUTES.SERVICE_MAP,
-		component: ServiceMapPage,
+		element: <ServiceMapPage />,
 		isPrivate: true,
-		exact: true,
 		key: 'SERVICE_MAP',
 	},
 	{
 		path: ROUTES.LOGS_SAVE_VIEWS,
-		component: LogsSaveViews,
+		element: <LogsSaveViews />,
 		isPrivate: true,
-		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACE_DETAIL,
-		exact: true,
+		element: <TraceDetail />,
-		component: TraceDetail,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,
-		exact: true,
+		element: <SettingsPage />,
-		component: SettingsPage,
 		isPrivate: true,
 		key: 'SETTINGS',
 	},
 	{
 		path: ROUTES.USAGE_EXPLORER,
-		exact: true,
+		element: <UsageExplorerPage />,
-		component: UsageExplorerPage,
 		isPrivate: true,
 		key: 'USAGE_EXPLORER',
 	},
 	{
 		path: ROUTES.ALL_DASHBOARD,
-		exact: true,
+		element: <DashboardPage />,
-		component: DashboardPage,
 		isPrivate: true,
 		key: 'ALL_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD,
-		exact: true,
+		element: <NewDashboardPage />,
-		component: NewDashboardPage,
 		isPrivate: true,
 		key: 'DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD_WIDGET,
-		exact: true,
+		element: <DashboardWidget />,
-		component: DashboardWidget,
 		isPrivate: true,
 		key: 'DASHBOARD_WIDGET',
 	},
 	{
 		path: ROUTES.EDIT_ALERTS,
-		exact: true,
+		element: <EditRulesPage />,
-		component: EditRulesPage,
 		isPrivate: true,
 		key: 'EDIT_ALERTS',
 	},
 	{
 		path: ROUTES.LIST_ALL_ALERT,
-		exact: true,
+		element: <ListAllALertsPage />,
-		component: ListAllALertsPage,
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
 	{
 		path: ROUTES.ALERTS_NEW,
-		exact: true,
+		element: <CreateNewAlerts />,
-		component: CreateNewAlerts,
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
 	{
 		path: ROUTES.ALERT_HISTORY,
-		exact: true,
+		element: <AlertHistory />,
-		component: AlertHistory,
 		isPrivate: true,
 		key: 'ALERT_HISTORY',
 	},
 	{
 		path: ROUTES.ALERT_OVERVIEW,
-		exact: true,
+		element: <AlertOverview />,
-		component: AlertOverview,
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
 	{
 		path: ROUTES.TRACE,
-		exact: true,
+		element: <TraceFilter />,
-		component: TraceFilter,
 		isPrivate: true,
 		key: 'TRACE',
 	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
-		exact: true,
+		element: <TracesExplorer />,
-		component: TracesExplorer,
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
 	{
 		path: ROUTES.TRACES_SAVE_VIEWS,
-		exact: true,
+		element: <TracesSaveViews />,
-		component: TracesSaveViews,
 		isPrivate: true,
 		key: 'TRACES_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
-		exact: true,
+		element: <TracesFunnels />,
-		component: TracesFunnels,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS_DETAIL,
-		exact: true,
+		element: <TracesFunnelDetails />,
-		component: TracesFunnelDetails,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS_DETAIL',
 	},
 	{
 		path: ROUTES.CHANNELS_NEW,
-		exact: true,
+		element: <CreateAlertChannelAlerts />,
-		component: CreateAlertChannelAlerts,
 		isPrivate: true,
 		key: 'CHANNELS_NEW',
 	},
 	{
 		path: ROUTES.CHANNELS_EDIT,
-		exact: true,
+		element: <EditAlertChannelsAlerts />,
-		component: EditAlertChannelsAlerts,
 		isPrivate: true,
 		key: 'CHANNELS_EDIT',
 	},
 	{
 		path: ROUTES.ALL_CHANNELS,
-		exact: true,
+		element: <AllAlertChannels />,
-		component: AllAlertChannels,
 		isPrivate: true,
 		key: 'ALL_CHANNELS',
 	},
 	{
 		path: ROUTES.ALL_ERROR,
-		exact: true,
+		element: <AllErrors />,
 		isPrivate: true,
-		component: AllErrors,
 		key: 'ALL_ERROR',
 	},
 	{
 		path: ROUTES.ERROR_DETAIL,
-		exact: true,
+		element: <ErrorDetails />,
-		component: ErrorDetails,
 		isPrivate: true,
 		key: 'ERROR_DETAIL',
 	},
 	{
 		path: ROUTES.VERSION,
-		exact: true,
+		element: <StatusPage />,
-		component: StatusPage,
 		isPrivate: true,
 		key: 'VERSION',
 	},
 	{
 		path: ROUTES.ORG_SETTINGS,
-		exact: true,
+		element: <OrganizationSettings />,
-		component: OrganizationSettings,
 		isPrivate: true,
 		key: 'ORG_SETTINGS',
 	},
 	{
 		path: ROUTES.INGESTION_SETTINGS,
-		exact: true,
+		element: <IngestionSettings />,
-		component: IngestionSettings,
 		isPrivate: true,
 		key: 'INGESTION_SETTINGS',
 	},
 	{
 		path: ROUTES.API_KEYS,
-		exact: true,
+		element: <APIKeys />,
-		component: APIKeys,
 		isPrivate: true,
 		key: 'API_KEYS',
 	},
 	{
 		path: ROUTES.MY_SETTINGS,
-		exact: true,
+		element: <MySettings />,
-		component: MySettings,
 		isPrivate: true,
 		key: 'MY_SETTINGS',
 	},
 	{
 		path: ROUTES.CUSTOM_DOMAIN_SETTINGS,
-		exact: true,
+		element: <CustomDomainSettings />,
-		component: CustomDomainSettings,
 		isPrivate: true,
 		key: 'CUSTOM_DOMAIN_SETTINGS',
 	},
 	{
 		path: ROUTES.LOGS,
-		exact: true,
+		element: <Logs />,
-		component: Logs,
 		key: 'LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_EXPLORER,
-		exact: true,
+		element: <LogsExplorer />,
-		component: LogsExplorer,
 		key: 'LOGS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.OLD_LOGS_EXPLORER,
-		exact: true,
+		element: <OldLogsExplorer />,
-		component: OldLogsExplorer,
 		key: 'OLD_LOGS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LIVE_LOGS,
-		exact: true,
+		element: <LiveLogs />,
-		component: LiveLogs,
 		key: 'LIVE_LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
-		exact: true,
+		element: <PipelinePage />,
-		component: PipelinePage,
 		key: 'LOGS_PIPELINES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGIN,
-		exact: true,
+		element: <Login />,
-		component: Login,
 		isPrivate: false,
 		key: 'LOGIN',
 	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
-		exact: true,
+		element: <UnAuthorized />,
-		component: UnAuthorized,
 		key: 'UN_AUTHORIZED',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.PASSWORD_RESET,
-		exact: true,
+		element: <PasswordReset />,
-		component: PasswordReset,
 		key: 'PASSWORD_RESET',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.SOMETHING_WENT_WRONG,
-		exact: true,
+		element: <SomethingWentWrong />,
-		component: SomethingWentWrong,
 		key: 'SOMETHING_WENT_WRONG',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.BILLING,
-		exact: true,
+		element: <BillingPage />,
-		component: BillingPage,
 		key: 'BILLING',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.WORKSPACE_LOCKED,
-		exact: true,
+		element: <WorkspaceBlocked />,
-		component: WorkspaceBlocked,
 		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
 	{
 		path: ROUTES.WORKSPACE_SUSPENDED,
-		exact: true,
+		element: <WorkspaceSuspended />,
-		component: WorkspaceSuspended,
 		isPrivate: true,
 		key: 'WORKSPACE_SUSPENDED',
 	},
 	{
 		path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
-		exact: true,
+		element: <WorkspaceAccessRestricted />,
-		component: WorkspaceAccessRestricted,
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
 	{
 		path: ROUTES.SHORTCUTS,
-		exact: true,
+		element: <ShortcutsPage />,
-		component: ShortcutsPage,
 		isPrivate: true,
 		key: 'SHORTCUTS',
 	},
 	{
 		path: ROUTES.INTEGRATIONS,
-		exact: true,
+		element: <InstalledIntegrations />,
-		component: InstalledIntegrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
-		exact: true,
+		element: <MessagingQueues />,
-		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
-		exact: true,
+		element: <MessagingQueues />,
-		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
-		exact: true,
+		element: <MessagingQueues />,
-		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
-		exact: true,
+		element: <MessagingQueues />,
-		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
-		exact: true,
+		element: <InfrastructureMonitoring />,
-		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
-		exact: true,
+		element: <InfrastructureMonitoring />,
-		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER,
-		exact: true,
+		element: <MetricsExplorer />,
-		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_EXPLORER,
-		exact: true,
+		element: <MetricsExplorer />,
-		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VIEWS,
-		exact: true,
+		element: <MetricsExplorer />,
-		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.API_MONITORING,
-		exact: true,
+		element: <ApiMonitoring />,
-		component: ApiMonitoring,
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
@@ -509,16 +449,14 @@ const routes: AppRoutes[] = [
 
 export const SUPPORT_ROUTE: AppRoutes = {
 	path: ROUTES.SUPPORT,
-	exact: true,
+	element: <SupportPage />,
-	component: SupportPage,
 	key: 'SUPPORT',
 	isPrivate: true,
 };
 
 export const LIST_LICENSES: AppRoutes = {
 	path: ROUTES.LIST_LICENSES,
-	exact: true,
+	element: <LicensePage />,
-	component: LicensePage,
 	isPrivate: true,
 	key: 'LIST_LICENSES',
 };
@@ -549,9 +487,8 @@ export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 ];
 
 export interface AppRoutes {
-	component: RouteProps['component'];
+	element: RouteProps['element'];
 	path: RouteProps['path'];
-	exact: RouteProps['exact'];
 	isPrivate: boolean;
 	key: keyof typeof ROUTES;
 }

frontend/src/api/utils.ts

@@ -1,7 +1,7 @@
 import deleteLocalStorageKey from 'api/browser/localstorage/remove';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN);
@@ -23,5 +23,5 @@ export const Logout = (): void => {
 		window.Intercom('shutdown');
 	}
 
-	history.push(ROUTES.LOGIN);
+	safeNavigateNoSameURLMemo(ROUTES.LOGIN);
 };

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -8,8 +8,9 @@ import {
 import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOptions';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 interface SelectOptionConfig {
 	placeholder: string;
@@ -27,7 +28,7 @@ function FilterSelect({
 	);
 
 	const urlQuery = useUrlQuery();
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const location = useLocation();
 
 	return (
@@ -55,7 +56,13 @@ function FilterSelect({
 			}
 			onChange={(value): void => {
 				handleSearch('');
-				setQueryParamsFromOptions(value, urlQuery, history, location, queryParam);
+				setQueryParamsFromOptions(
+					value,
+					urlQuery,
+					safeNavigate,
+					location,
+					queryParam,
+				);
 			}}
 		/>
 	);

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -3,8 +3,9 @@ import './CeleryTaskConfigOptions.styles.scss';
 import { Select, Spin, Typography } from 'antd';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import {
 	getValuesFromQueryParams,
@@ -16,7 +17,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		'celery.task_name',
 	);
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const location = useLocation();
 
 	const urlQuery = useUrlQuery();
@@ -52,7 +53,7 @@ function CeleryTaskConfigOptions(): JSX.Element {
 						setQueryParamsFromOptions(
 							value,
 							urlQuery,
-							history,
+							safeNavigate,
 							location,
 							QueryParams.taskName,
 						);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -7,12 +7,13 @@ import { ViewMenuAction } from 'container/GridCardLayout/config';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -49,7 +50,7 @@ function CeleryTaskBar({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -67,13 +68,13 @@ function CeleryTaskBar({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	const [barState, setBarState] = useState<CeleryTaskState>(CeleryTaskState.All);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -5,12 +5,13 @@ import { ViewMenuAction } from 'container/GridCardLayout/config';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -53,7 +54,7 @@ function CeleryTaskGraph({
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 	analyticsEvent?: string;
 }): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -82,13 +83,13 @@ function CeleryTaskGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	return (

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -10,12 +10,13 @@ import { Card } from 'container/GridCardLayout/styles';
 import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
@@ -47,7 +48,7 @@ function CeleryTaskLatencyGraph({
 	queryEnabled: boolean;
 	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -79,13 +80,13 @@ function CeleryTaskLatencyGraph({
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, history, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	const selectedFilters = useMemo(

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -1,6 +1,6 @@
 import { QueryParams } from 'constants/query';
-import { History, Location } from 'history';
 import getRenderer from 'lib/uPlotLib/utils/getRenderer';
+import type { Location, NavigateFunction } from 'react-router';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -17,13 +17,13 @@ export function getValuesFromQueryParams(
 export function setQueryParamsFromOptions(
 	value: string[],
 	urlQuery: URLSearchParams,
-	history: History<unknown>,
+	safeNavigate: NavigateFunction,
 	location: Location<unknown>,
 	queryParams: QueryParams,
 ): void {
 	urlQuery.set(queryParams, value.join(','));
 	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-	history.replace(generatedUrl);
+	safeNavigate(generatedUrl, { replace: true });
 }
 
 export function getFiltersFromQueryParams(

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -6,7 +6,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { CreditCard, X } from 'lucide-react';
 import { useState } from 'react';
 import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -26,7 +26,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -14,7 +14,7 @@ import {
 import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { Dispatch, SetStateAction, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import RangePickerModal from './RangePickerModal';
 import TimezonePicker from './TimezonePicker';

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -194,7 +194,7 @@ function ExplorerCard({
 											showSearch
 											placeholder="Select a view"
 											dropdownStyle={DropDownOverlay}
-											dropdownMatchSelectWidth={false}
+											popupMatchSelectWidth={false}
 											optionLabelProp="value"
 											value={viewName || undefined}
 										>

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -13,7 +13,7 @@ import { CreditCard, HelpCircle, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 

frontend/src/components/Loadable/index.tsx

@@ -1,16 +1,16 @@
 import { ComponentType, lazy, LazyExoticComponent } from 'react';
 import { lazyRetry } from 'utils/lazyWithRetries';
 
-function Loadable(importPath: {
-	(): LoadableProps;
-}): LazyExoticComponent<LazyComponent> {
-	return lazy(() => lazyRetry(() => importPath()));
-}
-
 type LazyComponent = ComponentType<Record<string, unknown>>;
 
 type LoadableProps = Promise<{
 	default: LazyComponent;
 }>;
 
+function Loadable(importPath: {
+	(): LoadableProps;
+}): LazyExoticComponent<LazyComponent> {
+	return lazy(() => lazyRetry(() => importPath()));
+}
+
 export default Loadable;

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -15,15 +15,15 @@ import {
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import { History } from 'history';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Bolt, Check, OctagonAlert, X } from 'lucide-react';
 import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { ReactNode, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import type { NavigateFunction } from 'react-router';
 import { v4 as uuid } from 'uuid';
 
 interface AttributeCheckListProps {
@@ -46,7 +46,7 @@ export enum AttributesFilters {
 function ErrorTitleAndKey({
 	title,
 	parentTitle,
-	history,
+	safeNavigate,
 	isCloudUserVal,
 	errorMsg,
 	isLeaf,
@@ -54,7 +54,7 @@ function ErrorTitleAndKey({
 	title: string;
 	parentTitle: string;
 	isCloudUserVal: boolean;
-	history: History<unknown>;
+	safeNavigate: NavigateFunction;
 	errorMsg?: string;
 	isLeaf?: boolean;
 }): TreeDataNode {
@@ -76,7 +76,7 @@ function ErrorTitleAndKey({
 		}
 
 		if (isCloudUserVal && !!link) {
-			history.push(link);
+			safeNavigate(link);
 		} else {
 			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
 		}
@@ -146,7 +146,7 @@ function generateTreeDataNodes(
 	response: OnboardingStatusResponse['data'],
 	parentTitle: string,
 	isCloudUserVal: boolean,
-	history: History<unknown>,
+	safeNavigate: NavigateFunction,
 ): TreeDataNode[] {
 	return response
 		.map((item) => {
@@ -159,7 +159,7 @@ function generateTreeDataNodes(
 						title: item.attribute,
 						errorMsg: item.error_message || '',
 						parentTitle,
-						history,
+						safeNavigate,
 						isCloudUserVal,
 					});
 				}
@@ -182,7 +182,7 @@ function AttributeCheckList({
 		setFilter(value);
 	};
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 
 	useEffect(() => {
 		const filteredData = onboardingStatusResponses.map((response) => {
@@ -192,7 +192,7 @@ function AttributeCheckList({
 					errorMsg: response.errorMsg,
 					isLeaf: true,
 					parentTitle: response.title,
-					history,
+					safeNavigate,
 					isCloudUserVal,
 				});
 			}
@@ -210,7 +210,7 @@ function AttributeCheckList({
 					filteredData,
 					response.title,
 					isCloudUserVal,
-					history,
+					safeNavigate,
 				),
 			};
 		});

frontend/src/components/NotFound/styles.ts

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import styled from 'styled-components';
 
 export const Button = styled(Link)`

frontend/src/components/RouteTab/index.tsx

@@ -1,4 +1,5 @@
 import { Tabs, TabsProps } from 'antd';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 import { RouteTabProps } from './types';
 
@@ -6,7 +7,6 @@ function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
-	history,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const onChange = (activeRoute: string): void => {
@@ -17,7 +17,7 @@ function RouteTab({
 		const selectedRoute = routes.find((e) => e.key === activeRoute);
 
 		if (selectedRoute) {
-			history.push(selectedRoute.route);
+			safeNavigateNoSameURLMemo(selectedRoute.route);
 		}
 	};
 

frontend/src/components/RouteTab/types.ts

@@ -1,5 +1,5 @@
 import { TabsProps } from 'antd';
-import { History } from 'history';
+// import type { NavigateFunction } from 'react-router';
 
 export type TabRoutes = {
 	name: React.ReactNode;
@@ -12,5 +12,5 @@ export interface RouteTabProps {
 	routes: TabRoutes[];
 	activeKey: TabsProps['activeKey'];
 	onChangeHandler?: (key: string) => void;
-	history: History<unknown>;
+	// safeNavigate: NavigateFunction;
 }

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -7,7 +7,7 @@ import ROUTES from 'constants/routes';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { DraftingCompass } from 'lucide-react';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 type Props = {
 	children: React.ReactNode;

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -3,10 +3,10 @@ import './TopContributorsCard.styles.scss';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import TopContributorsContent from './TopContributorsContent';
 import { TopContributorsCardProps } from './types';
@@ -17,6 +17,7 @@ function TopContributorsCard({
 	totalCurrentTriggers,
 }: TopContributorsCardProps): JSX.Element {
 	const { search } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
 
 	const viewAllTopContributorsParam = searchParams.get('viewAllTopContributors');
@@ -43,7 +44,7 @@ function TopContributorsCard({
 
 			return newState;
 		});
-		history.push({ search: searchParams.toString() });
+		safeNavigate({ search: searchParams.toString() });
 	};
 
 	return (

frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx

@@ -3,8 +3,8 @@ import Uplot from 'components/Uplot';
 import { QueryParams } from 'constants/query';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
 import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
 import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
@@ -28,6 +28,8 @@ function HorizontalTimelineGraph({
 	isDarkMode: boolean;
 	data: AlertRuleTimelineGraphResponse[];
 }): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+
 	const transformedData: AlignedData = useMemo(() => {
 		if (!data?.length) {
 			return [[], []];
@@ -102,7 +104,7 @@ function HorizontalTimelineGraph({
 								urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 								urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 
-								history.push({
+								safeNavigate({
 									search: urlQuery.toString(),
 								});
 							}
@@ -131,6 +133,7 @@ function HorizontalTimelineGraph({
 			urlQuery,
 			dispatch,
 			timezone.value,
+			safeNavigate,
 		],
 	);
 	return <Uplot data={transformedData} options={options} />;

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -2,11 +2,11 @@ import './TabsAndFilters.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import { TimelineFilter, TimelineTab } from 'container/AlertHistory/types';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Info } from 'lucide-react';
 import Tabs2 from 'periscope/components/Tabs2';
 import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 function ComingSoon(): JSX.Element {
 	return (
@@ -41,6 +41,8 @@ function TimelineTabs(): JSX.Element {
 
 function TimelineFilters(): JSX.Element {
 	const { search } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+
 	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
 
 	const initialSelectedTab = useMemo(
@@ -50,7 +52,7 @@ function TimelineFilters(): JSX.Element {
 
 	const handleFilter = (value: TimelineFilter): void => {
 		searchParams.set('timelineFilter', value);
-		history.push({ search: searchParams.toString() });
+		safeNavigate({ search: searchParams.toString() });
 	};
 
 	const tabs = [

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -5,11 +5,11 @@ import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { Channels, PayloadProps } from 'types/api/channels/getAll';
 
 import Delete from './Delete';
@@ -17,17 +17,22 @@ import Delete from './Delete';
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
 	const { notifications } = useNotifications();
+	const { safeNavigate } = useSafeNavigate();
 	const [channels, setChannels] = useState<Channels[]>(allChannels);
 	const { user } = useAppContext();
 	const [action] = useComponentPermission(['new_alert_action'], user.role);
 
-	const onClickEditHandler = useCallback((id: string) => {
+	const onClickEditHandler = useCallback(
-		history.replace(
+		(id: string) => {
-			generatePath(ROUTES.CHANNELS_EDIT, {
+			safeNavigate(
-				id,
+				generatePath(ROUTES.CHANNELS_EDIT, {
-			}),
+					id,
-		);
+				}),
-	}, []);
+				{ replace: true },
+			);
+		},
+		[safeNavigate],
+	);
 
 	const columns: ColumnsType<Channels> = [
 		{

frontend/src/container/AllAlertChannels/index.tsx

@@ -7,7 +7,7 @@ import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import useFetch from 'hooks/useFetch';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isUndefined } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect } from 'react';
@@ -21,13 +21,14 @@ const { Paragraph } = Typography;
 function AlertChannels(): JSX.Element {
 	const { t } = useTranslation(['channels']);
 	const { user } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 	const [addNewChannelPermission] = useComponentPermission(
 		['add_new_channel'],
 		user.role,
 	);
 	const onToggleHandler = useCallback(() => {
-		history.push(ROUTES.CHANNELS_NEW);
+		safeNavigate(ROUTES.CHANNELS_NEW);
-	}, []);
+	}, [safeNavigate]);
 
 	const { loading, payload, error, errorMessage } = useFetch(getAll);
 

frontend/src/container/AllError/index.tsx

@@ -21,17 +21,17 @@ import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
 import useResourceAttribute from 'hooks/useResourceAttribute';
 import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
 import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
-import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
@@ -66,6 +66,7 @@ function AllErrors(): JSX.Element {
 		(state) => state.globalTime,
 	);
 	const { pathname } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 	const params = useUrlQuery();
 	const { t } = useTranslation(['common']);
 	const {
@@ -202,7 +203,9 @@ function AllErrors(): JSX.Element {
 				queryParams.serviceName = serviceFilterValue;
 			}
 
-			history.replace(`${pathname}?${createQueryParams(queryParams)}`);
+			safeNavigate(`${pathname}?${createQueryParams(queryParams)}`, {
+				replace: true,
+			});
 			confirm();
 		},
 		[
@@ -213,6 +216,7 @@ function AllErrors(): JSX.Element {
 			getUpdatedServiceName,
 			pathname,
 			updatedOrder,
+			safeNavigate,
 		],
 	);
 
@@ -414,7 +418,7 @@ function AllErrors(): JSX.Element {
 					serviceName: getFilterString(params.get(urlKey.serviceName)),
 					exceptionType: getFilterString(params.get(urlKey.exceptionType)),
 				});
-				history.replace(
+				safeNavigate(
 					`${pathname}?${createQueryParams({
 						order: updatedOrder,
 						offset: (current - 1) * pageSize,
@@ -423,10 +427,11 @@ function AllErrors(): JSX.Element {
 						exceptionType,
 						serviceName,
 					})}`,
+					{ replace: true },
 				);
 			}
 		},
-		[pathname],
+		[pathname, safeNavigate],
 	);
 
 	const logEventCalledRef = useRef(false);

frontend/src/container/AppLayout/index.tsx

@@ -25,7 +25,7 @@ import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { INTEGRATION_TYPES } from 'pages/Integrations/utils';
@@ -42,7 +42,7 @@ import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQueries } from 'react-query';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import {
@@ -121,6 +121,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	});
 
 	const isDarkMode = useIsDarkMode();
+	const { safeNavigate } = useSafeNavigate();
 
 	const { pathname } = useLocation();
 	const { t } = useTranslation(['titles']);
@@ -319,9 +320,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const handleUpgrade = useCallback((): void => {
 		if (user.role === USER_ROLES.ADMIN) {
-			history.push(ROUTES.BILLING);
+			safeNavigate(ROUTES.BILLING);
 		}
-	}, [user.role]);
+	}, [user.role, safeNavigate]);
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({

frontend/src/container/CloudIntegrationPage/Header/Header.tsx

@@ -3,7 +3,7 @@ import './Header.styles.scss';
 import Breadcrumb from 'antd/es/breadcrumb';
 import ROUTES from 'constants/routes';
 import { Blocks, LifeBuoy } from 'lucide-react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 function Header(): JSX.Element {
 	return (

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx

@@ -5,10 +5,10 @@ import { Button, Select, Skeleton } from 'antd';
 import { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Check, ChevronDown } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
 
 import { CloudAccount } from '../../ServicesSection/types';
 import AccountSettingsModal from './AccountSettingsModal';
@@ -140,7 +140,7 @@ function AccountActionsRenderer({
 
 function AccountActions(): JSX.Element {
 	const urlQuery = useUrlQuery();
-	const navigate = useNavigate();
+	const { safeNavigate } = useSafeNavigate();
 	const { data: accounts, isLoading } = useAwsAccounts();
 
 	const initialAccount = useMemo(
@@ -162,7 +162,7 @@ function AccountActions(): JSX.Element {
 			setActiveAccount(initialAccount);
 			const latestUrlQuery = new URLSearchParams(window.location.search);
 			latestUrlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
-			navigate({ search: latestUrlQuery.toString() });
+			safeNavigate({ search: latestUrlQuery.toString() });
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [initialAccount]);
@@ -216,7 +216,7 @@ function AccountActions(): JSX.Element {
 					if (accounts) {
 						setActiveAccount(getAccountById(accounts, value));
 						urlQuery.set('cloudAccountId', value);
-						navigate({ search: urlQuery.toString() });
+						safeNavigate({ search: urlQuery.toString() });
 					}
 				}}
 				onIntegrationModalOpen={startAccountConnectionAttempt}

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx

@@ -7,8 +7,8 @@ import {
 	getRegionPreviewText,
 	useAccountSettingsModal,
 } from 'hooks/integration/aws/useAccountSettingsModal';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import { Dispatch, SetStateAction, useCallback } from 'react';
 import { useQueryClient } from 'react-query';
 
@@ -45,12 +45,13 @@ function AccountSettingsModal({
 
 	const queryClient = useQueryClient();
 	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
 
 	const handleRemoveIntegrationAccountSuccess = (): void => {
 		queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
 		urlQuery.delete('cloudAccountId');
 		handleClose();
-		history.replace({ search: urlQuery.toString() });
+		safeNavigate({ search: urlQuery.toString() });
 
 		logEvent('AWS Integration: Account removed', {
 			id: account?.id,

frontend/src/container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { ServiceData } from './types';
 

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx

@@ -1,8 +1,8 @@
 import Spinner from 'components/Spinner';
 import { useGetAccountServices } from 'hooks/integration/aws/useGetAccountServices';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
 
 import ServiceItem from './ServiceItem';
 
@@ -16,7 +16,7 @@ function ServicesList({
 	filter,
 }: ServicesListProps): JSX.Element {
 	const urlQuery = useUrlQuery();
-	const navigate = useNavigate();
+	const { safeNavigate } = useSafeNavigate();
 	const { data: services = [], isLoading } = useGetAccountServices(
 		cloudAccountId,
 	);
@@ -26,9 +26,9 @@ function ServicesList({
 		(serviceId: string): void => {
 			const latestUrlQuery = new URLSearchParams(window.location.search);
 			latestUrlQuery.set('service', serviceId);
-			navigate({ search: latestUrlQuery.toString() });
+			safeNavigate({ search: latestUrlQuery.toString() });
 		},
-		[navigate],
+		[safeNavigate],
 	);
 
 	const filteredServices = useMemo(() => {

frontend/src/container/ConfigDropdown/Config/Link.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 function LinkContainer({ children, href }: LinkContainerProps): JSX.Element {
 	const isInternalLink = href.startsWith('/');

frontend/src/container/CreateAlertChannels/index.tsx

@@ -15,7 +15,7 @@ import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -86,6 +86,7 @@ function CreateAlertChannels({
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
+	const { safeNavigate } = useSafeNavigate();
 
 	const [type, setType] = useState<ChannelType>(preType);
 	const onTypeChangeHandler = useCallback(
@@ -143,7 +144,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -163,7 +164,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareSlackRequest, t, notifications]);
+	}, [prepareSlackRequest, t, notifications, safeNavigate]);
 
 	const prepareWebhookRequest = useCallback(() => {
 		// initial api request without auth params
@@ -210,7 +211,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -230,7 +231,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareWebhookRequest, t, notifications]);
+	}, [prepareWebhookRequest, t, notifications, safeNavigate]);
 
 	const preparePagerRequest = useCallback(() => {
 		const validationError = ValidatePagerChannel(selectedConfig as PagerChannel);
@@ -271,7 +272,7 @@ function CreateAlertChannels({
 						message: 'Success',
 						description: t('channel_creation_done'),
 					});
-					history.replace(ROUTES.ALL_CHANNELS);
+					safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 					return { status: 'success', statusMessage: t('channel_creation_done') };
 				}
 				notifications.error({
@@ -297,7 +298,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [t, notifications, preparePagerRequest]);
+	}, [t, notifications, preparePagerRequest, safeNavigate]);
 
 	const prepareOpsgenieRequest = useCallback(
 		() => ({
@@ -322,7 +323,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -342,7 +343,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareOpsgenieRequest, t, notifications]);
+	}, [prepareOpsgenieRequest, t, notifications, safeNavigate]);
 
 	const prepareEmailRequest = useCallback(
 		() => ({
@@ -365,7 +366,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -385,7 +386,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareEmailRequest, t, notifications]);
+	}, [prepareEmailRequest, t, notifications, safeNavigate]);
 
 	const prepareMsTeamsRequest = useCallback(
 		() => ({
@@ -409,7 +410,7 @@ function CreateAlertChannels({
 					message: 'Success',
 					description: t('channel_creation_done'),
 				});
-				history.replace(ROUTES.ALL_CHANNELS);
+				safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 				return { status: 'success', statusMessage: t('channel_creation_done') };
 			}
 			notifications.error({
@@ -429,7 +430,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareMsTeamsRequest, t, notifications]);
+	}, [prepareMsTeamsRequest, t, notifications, safeNavigate]);
 
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {

frontend/src/container/CreateAlertRule/index.tsx

@@ -4,9 +4,9 @@ import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef } from 'types/api/alerts/def';
 
@@ -24,6 +24,7 @@ function CreateRules(): JSX.Element {
 	const [initValues, setInitValues] = useState<AlertDef | null>(null);
 
 	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 	const queryParams = new URLSearchParams(location.search);
 	const alertTypeFromURL = queryParams.get(QueryParams.ruleType);
 	const version = queryParams.get('version');
@@ -96,7 +97,7 @@ function CreateRules(): JSX.Element {
 		}
 
 		const generatedUrl = `${location.pathname}?${queryParams.toString()}`;
-		history.replace(generatedUrl);
+		safeNavigate(generatedUrl, { replace: true });
 	};
 
 	useEffect(() => {

frontend/src/container/EditAlertChannels/index.tsx

@@ -25,10 +25,10 @@ import {
 } from 'container/CreateAlertChannels/config';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 function EditAlertChannels({
 	initialValue,
@@ -52,7 +52,9 @@ function EditAlertChannels({
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
-	const { id } = useParams<{ id: string }>();
+	const { safeNavigate } = useSafeNavigate();
+	// Temp: Hard type casting for string | undefined
+	const { id } = useParams() as { id: string };
 
 	const [type, setType] = useState<ChannelType>(
 		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
@@ -101,7 +103,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -113,7 +115,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareSlackRequest, t, notifications, selectedConfig]);
+	}, [prepareSlackRequest, t, notifications, selectedConfig, safeNavigate]);
 
 	const prepareWebhookRequest = useCallback(() => {
 		const { name, username, password } = selectedConfig;
@@ -158,7 +160,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		showError(response.error || t('channel_edit_failed'));
@@ -168,7 +170,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareWebhookRequest, t, notifications, selectedConfig]);
+	}, [prepareWebhookRequest, t, notifications, selectedConfig, safeNavigate]);
 
 	const prepareEmailRequest = useCallback(
 		() => ({
@@ -191,7 +193,7 @@ function EditAlertChannels({
 				message: 'Success',
 				description: t('channel_edit_done'),
 			});
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -204,7 +206,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareEmailRequest, t, notifications]);
+	}, [prepareEmailRequest, t, notifications, safeNavigate]);
 
 	const preparePagerRequest = useCallback(
 		() => ({
@@ -245,7 +247,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -258,7 +260,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [preparePagerRequest, notifications, selectedConfig, t]);
+	}, [preparePagerRequest, notifications, selectedConfig, t, safeNavigate]);
 
 	const prepareOpsgenieRequest = useCallback(
 		() => ({
@@ -293,7 +295,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -306,7 +308,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareOpsgenieRequest, t, notifications, selectedConfig]);
+	}, [prepareOpsgenieRequest, t, notifications, selectedConfig, safeNavigate]);
 
 	const prepareMsTeamsRequest = useCallback(
 		() => ({
@@ -340,7 +342,7 @@ function EditAlertChannels({
 				description: t('channel_edit_done'),
 			});
 
-			history.replace(ROUTES.ALL_CHANNELS);
+			safeNavigate(ROUTES.ALL_CHANNELS, { replace: true });
 			return { status: 'success', statusMessage: t('channel_edit_done') };
 		}
 		notifications.error({
@@ -353,7 +355,7 @@ function EditAlertChannels({
 			status: 'failed',
 			statusMessage: response.error || t('channel_edit_failed'),
 		};
-	}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
+	}, [prepareMsTeamsRequest, t, notifications, selectedConfig, safeNavigate]);
 
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {

frontend/src/container/ErrorDetails/index.tsx

@@ -8,15 +8,15 @@ import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getNanoSeconds } from 'container/AllError/utils';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
-import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import { useTimezone } from 'providers/Timezone';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
 
 import { keyToExclude } from './config';
@@ -77,6 +77,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 	);
 
 	const { notifications } = useNotifications();
+	const { safeNavigate } = useSafeNavigate();
 
 	const onClickErrorIdHandler = async (
 		id: string,
@@ -96,7 +97,9 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				errorId: id,
 			};
 
-			history.replace(`${pathname}?${createQueryParams(queryParams)}`);
+			safeNavigate(`${pathname}?${createQueryParams(queryParams)}`, {
+				replace: true,
+			});
 		} catch (error) {
 			notifications.error({
 				message: t('something_went_wrong'),
@@ -118,7 +121,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			traceId: errorDetail.traceID,
 			exceptionId: errorDetail?.errorId,
 		});
-		history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
+		safeNavigate(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
 	};
 
 	const logEventCalledRef = useRef(false);

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -39,6 +39,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useErrorNotification from 'hooks/useErrorNotification';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { cloneDeep, isEqual, omit } from 'lodash-es';
 import {
@@ -60,7 +61,6 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useHistory } from 'react-router-dom';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -96,7 +96,7 @@ function ExplorerOptions({
 	const [newViewName, setNewViewName] = useState<string>('');
 	const [color, setColor] = useState(Color.BG_SIENNA_500);
 	const { notifications } = useNotifications();
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const ref = useRef<RefSelectProps>(null);
 	const isDarkMode = useIsDarkMode();
 	const isLogsExplorer = sourcepage === DataSource.LOGS;
@@ -181,13 +181,13 @@ function ExplorerOptions({
 
 		const stringifiedQuery = handleConditionalQueryModification();
 
-		history.push(
+		safeNavigate(
 			`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
 				stringifiedQuery,
 			)}`,
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [handleConditionalQueryModification, history]);
+	}, [handleConditionalQueryModification, safeNavigate]);
 
 	const onCancel = (value: boolean) => (): void => {
 		onModalToggle(value);
@@ -461,7 +461,7 @@ function ExplorerOptions({
 					: defaultLogsSelectedColumns,
 		});
 
-		history.replace(DATASOURCE_VS_ROUTES[sourcepage]);
+		safeNavigate(DATASOURCE_VS_ROUTES[sourcepage], { replace: true });
 	};
 
 	const isQueryUpdated = isStagedQueryUpdated(

frontend/src/container/FormAlertChannels/index.tsx

@@ -9,7 +9,7 @@ import {
 	SlackChannel,
 	WebhookChannel,
 } from 'container/CreateAlertChannels/config';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -35,6 +35,7 @@ function FormAlertChannels({
 	editing = false,
 }: FormAlertChannelsProps): JSX.Element {
 	const { t } = useTranslation('channels');
+	const { safeNavigate } = useSafeNavigate();
 
 	const renderSettings = (): ReactElement | null => {
 		switch (type) {
@@ -147,7 +148,7 @@ function FormAlertChannels({
 					</Button>
 					<Button
 						onClick={(): void => {
-							history.replace(ROUTES.SETTINGS);
+							safeNavigate(ROUTES.SETTINGS);
 						}}
 					>
 						{t('button_return')}

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -18,10 +18,10 @@ import {
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
-import history from 'lib/history';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useAppContext } from 'providers/App/App';
@@ -29,7 +29,7 @@ import { useTimezone } from 'providers/Timezone';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { AlertDef } from 'types/api/alerts/def';
@@ -85,6 +85,7 @@ function ChartPreview({
 	>((state) => state.globalTime);
 
 	const { featureFlags } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -200,9 +201,9 @@ function ChartPreview({
 			urlQuery.set(QueryParams.startTime, minTime.toString());
 			urlQuery.set(QueryParams.endTime, maxTime.toString());
 			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 		},
-		[dispatch, location.pathname, urlQuery],
+		[dispatch, location.pathname, urlQuery, safeNavigate],
 	);
 
 	const { timezone } = useTimezone();

frontend/src/container/FormAlertRules/index.tsx

@@ -29,7 +29,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { AppState } from 'store/reducers';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import {

frontend/src/container/FullScreenHeader/FullScreenHeader.tsx

@@ -2,15 +2,16 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import './FullScreenHeader.styles.scss';
 
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
 export default function FullScreenHeader({
 	overrideRoute,
 }: {
 	overrideRoute?: string;
 }): React.ReactElement {
+	const { safeNavigate } = useSafeNavigate();
 	const handleLogoClick = (): void => {
-		history.push(overrideRoute || '/');
+		safeNavigate(overrideRoute || '/');
 	};
 	return (
 		<div className="full-screen-header-container">

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -28,7 +28,7 @@ import GetMinMax from 'lib/getMinMax';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -25,7 +25,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -34,7 +34,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FullScreen, FullScreenHandle } from 'react-full-screen';
 import { ItemCallback, Layout } from 'react-grid-layout';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import { ROLES, USER_ROLES } from 'types/roles';

frontend/src/container/GridValueComponent/index.tsx

@@ -3,7 +3,7 @@ import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import ValueGraph from 'components/ValueGraph';
 import { generateGridTitle } from 'container/GridPanelSwitch/utils';
 import { memo, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { TitleContainer, ValueContainer } from './styles';
 import { GridValueComponentProps } from './types';

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -3,14 +3,14 @@ import getAll from 'api/alerts/getAll';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { ArrowRight, ArrowUpRight, Plus } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { GettableAlert } from 'types/api/alerts/get';
 import { USER_ROLES } from 'types/roles';
 
@@ -28,6 +28,7 @@ export default function AlertRules({
 
 	const location = useLocation();
 	const params = new URLSearchParams(location.search);
+	const { safeNavigate } = useSafeNavigate();
 
 	// Fetch Alerts
 	const { data: alerts, isError, isLoading } = useQuery('allAlerts', {
@@ -131,7 +132,7 @@ export default function AlertRules({
 
 		params.set(QueryParams.ruleId, record.id.toString());
 
-		history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 	};
 
 	const renderAlertRules = (): JSX.Element => (

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -7,7 +7,7 @@ import { ArrowRight, ArrowUpRight, Plus } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
 

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -3,7 +3,7 @@ import { Button, Skeleton, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useGetDeploymentsData } from 'hooks/CustomDomain/useGetDeploymentsData';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Globe, Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
@@ -20,6 +20,7 @@ function DataSourceInfo({
 	isLoading: boolean;
 }): JSX.Element {
 	const { activeLicenseV3 } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 
 	const notSendingData = !dataSentToSigNoz;
 
@@ -91,7 +92,7 @@ function DataSourceInfo({
 										activeLicenseV3 &&
 										activeLicenseV3.platform === LicensePlatform.CLOUD
 									) {
-										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+										safeNavigate(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
 										window?.open(
 											DOCS_LINKS.ADD_DATA_SOURCE,
@@ -108,7 +109,7 @@ function DataSourceInfo({
 											activeLicenseV3 &&
 											activeLicenseV3.platform === LicensePlatform.CLOUD
 										) {
-											history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+											safeNavigate(ROUTES.GET_STARTED_WITH_CLOUD);
 										} else {
 											window?.open(
 												DOCS_LINKS.ADD_DATA_SOURCE,

frontend/src/container/Home/Home.tsx

@@ -17,7 +17,7 @@ import { getHostListsQuery } from 'container/InfraMonitoringHosts/utils';
 import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
 import { useGetK8sPodsList } from 'hooks/infraMonitoring/useGetK8sPodsList';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench } from 'lucide-react';
 import { AnimatePresence } from 'motion/react';
@@ -45,6 +45,7 @@ const homeInterval = 30 * 60 * 1000;
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function Home(): JSX.Element {
 	const { user } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 
 	const [startTime, setStartTime] = useState<number | null>(null);
 	const [endTime, setEndTime] = useState<number | null>(null);
@@ -382,14 +383,14 @@ export default function Home(): JSX.Element {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
-												history.push(ROUTES.LOGS_EXPLORER);
+												safeNavigate(ROUTES.LOGS_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
 													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Logs',
 													});
-													history.push(ROUTES.LOGS_EXPLORER);
+													safeNavigate(ROUTES.LOGS_EXPLORER);
 												}
 											}}
 										>
@@ -423,14 +424,14 @@ export default function Home(): JSX.Element {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
-												history.push(ROUTES.TRACES_EXPLORER);
+												safeNavigate(ROUTES.TRACES_EXPLORER);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
 													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Traces',
 													});
-													history.push(ROUTES.TRACES_EXPLORER);
+													safeNavigate(ROUTES.TRACES_EXPLORER);
 												}
 											}}
 										>
@@ -464,14 +465,14 @@ export default function Home(): JSX.Element {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
-												history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+												safeNavigate(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
 													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Metrics',
 													});
-													history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+													safeNavigate(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
 												}
 											}}
 										>
@@ -518,7 +519,7 @@ export default function Home(): JSX.Element {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
-													history.push(ROUTES.LOGS_EXPLORER);
+													safeNavigate(ROUTES.LOGS_EXPLORER);
 												}}
 											>
 												Open Logs Explorer
@@ -532,7 +533,7 @@ export default function Home(): JSX.Element {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
-													history.push(ROUTES.TRACES_EXPLORER);
+													safeNavigate(ROUTES.TRACES_EXPLORER);
 												}}
 											>
 												Open Traces Explorer
@@ -573,7 +574,7 @@ export default function Home(): JSX.Element {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
-													history.push(ROUTES.ALL_DASHBOARD);
+													safeNavigate(ROUTES.ALL_DASHBOARD);
 												}}
 											>
 												Create dashboard
@@ -615,7 +616,7 @@ export default function Home(): JSX.Element {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
-													history.push(ROUTES.ALERTS_NEW);
+													safeNavigate(ROUTES.ALERTS_NEW);
 												}}
 											>
 												Create an alert

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -4,7 +4,7 @@ import './HomeChecklist.styles.scss';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
@@ -41,6 +41,7 @@ function HomeChecklist({
 	const [whatsNextChecklistItems, setWhatsNextChecklistItems] = useState<
 		ChecklistItem[]
 	>([]);
+	const { safeNavigate } = useSafeNavigate();
 
 	useEffect(() => {
 		setCompletedChecklistItems(checklistItems.filter((item) => item.completed));
@@ -92,12 +93,12 @@ function HomeChecklist({
 														});
 
 														if (item.toRoute !== ROUTES.GET_STARTED_WITH_CLOUD) {
-															history.push(item.toRoute || '');
+															safeNavigate(item.toRoute || '');
 														} else if (
 															activeLicenseV3 &&
 															activeLicenseV3.platform === LicensePlatform.CLOUD
 														) {
-															history.push(item.toRoute || '');
+															safeNavigate(item.toRoute || '');
 														} else {
 															window?.open(
 																item.docsLink || '',

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -14,7 +14,7 @@ import { SOURCEPAGE_VS_ROUTES } from 'pages/SaveView/constants';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -11,7 +11,6 @@ import useGetTopLevelOperations from 'hooks/useGetTopLevelOperations';
 import useResourceAttribute from 'hooks/useResourceAttribute';
 import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import history from 'lib/history';
 import { ArrowRight, ArrowUpRight } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
@@ -19,7 +18,7 @@ import { IUser } from 'providers/App/types';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { QueryKey } from 'react-query';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { AppState } from 'store/reducers';
 import {
 	LicensePlatform,
@@ -29,6 +28,7 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 import { DOCS_LINKS } from '../constants';
 import { columns, TIME_PICKER_OPTIONS } from './constants';
@@ -72,7 +72,7 @@ const EmptyState = memo(
 									activeLicenseV3 &&
 									activeLicenseV3.platform === LicensePlatform.CLOUD
 								) {
-									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+									safeNavigateNoSameURLMemo(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
 									window?.open(
 										DOCS_LINKS.ADD_DATA_SOURCE,

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -3,13 +3,12 @@ import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useQueryService } from 'hooks/useQueryService';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import history from 'lib/history';
 import { ArrowRight, ArrowUpRight } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { AppState } from 'store/reducers';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { ServicesList } from 'types/api/metrics/getService';
@@ -127,7 +126,7 @@ export default function ServiceTraces({
 										activeLicenseV3 &&
 										activeLicenseV3.platform === LicensePlatform.CLOUD
 									) {
-										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+										safeNavigate(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
 										window?.open(
 											DOCS_LINKS.ADD_DATA_SOURCE,
@@ -160,7 +159,7 @@ export default function ServiceTraces({
 				</div>
 			</div>
 		),
-		[user?.role, activeLicenseV3],
+		[user?.role, activeLicenseV3, safeNavigate],
 	);
 
 	const renderDashboardsList = useCallback(

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -5,7 +5,7 @@ import { Button, Divider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
 import { DataSource } from 'types/common/queryBuilder';
@@ -33,13 +33,14 @@ export function AlertsEmptyState(): JSX.Element {
 		['add_new_alert', 'action'],
 		user.role,
 	);
+	const { safeNavigate } = useSafeNavigate();
 
 	const [loading, setLoading] = useState(false);
 
 	const onClickNewAlertHandler = useCallback(() => {
 		setLoading(false);
-		history.push(ROUTES.ALERTS_NEW);
+		safeNavigate(ROUTES.ALERTS_NEW);
-	}, []);
+	}, [safeNavigate]);
 
 	return (
 		<div className="alert-list-container">

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -20,8 +20,8 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import useInterval from 'hooks/useInterval';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
@@ -61,6 +61,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		const filteredData = filterAlerts(allAlertRules, value);
 		return filteredData || [];
 	});
+	const { safeNavigate } = useSafeNavigate();
 
 	// Type asuring
 	const sortingOrder: 'ascend' | 'descend' | null =
@@ -102,7 +103,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		logEvent('Alert: New alert button clicked', {
 			number: allAlertRules?.length,
 		});
-		history.push(ROUTES.ALERTS_NEW);
+		safeNavigate(ROUTES.ALERTS_NEW);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
@@ -118,7 +119,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		params.set(QueryParams.ruleId, record.id.toString());
 
 		setEditLoader(false);
-		history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 	};
 
 	const onCloneHandler = (
@@ -146,7 +147,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					setTimeout(() => {
 						const clonedAlert = refetchData.payload[refetchData.payload.length - 1];
 						params.set(QueryParams.ruleId, String(clonedAlert.id));
-						history.push(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
+						safeNavigate(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
 					}, 2000);
 				}
 				if (status === 'error') {

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -75,7 +75,7 @@ import {
 } from 'react';
 import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { useCopyToClipboard } from 'react-use';
 import {
 	Dashboard,

frontend/src/container/ListOfDashboard/ImportJSON/index.tsx

@@ -25,7 +25,7 @@ import { ExternalLink, Github, MonitorDot, MoveRight, X } from 'lucide-react';
 // See more: https://github.com/lucide-icons/lucide/issues/94
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { DashboardData } from 'types/api/dashboard/getAll';
 
 function ImportJSON({

frontend/src/container/ListOfDashboard/SearchFilter/index.tsx

@@ -2,7 +2,7 @@ import { CloseCircleFilled } from '@ant-design/icons';
 import { useMachine } from '@xstate/react';
 import { Button, Select } from 'antd';
 import { RefSelectProps } from 'antd/lib/select';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { filter, map } from 'lodash-es';
 import {
 	MutableRefObject,
@@ -11,6 +11,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import { useLocation } from 'react-router';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -41,13 +42,15 @@ function SearchFilter({
 	const [selectedValues, setSelectedValues] = useState<string[]>([]);
 	const [staging, setStaging] = useState<string[] | string[][] | unknown[]>([]);
 	const [queries, setQueries] = useState<IQueryStructure[]>([]);
+	const { safeNavigate } = useSafeNavigate();
+	const { pathname, search } = useLocation();
 
 	useEffect(() => {
-		const searchQueryString = new URLSearchParams(history.location.search).get(
+		const searchQueryString = new URLSearchParams(search).get('search');
-			'search',
-		);
 		if (searchQueryString)
 			setQueries(convertURLQueryStringToQuery(searchQueryString) || []);
+		// TODO: SMIT is this a bug no search in deps?
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	useEffect(() => {
 		filterDashboards(executeSearchQueries(queries, searchData));
@@ -56,15 +59,15 @@ function SearchFilter({
 
 	const updateURLWithQuery = useCallback(
 		(inputQueries?: IQueryStructure[]): void => {
-			history.push({
+			safeNavigate({
-				pathname: history.location.pathname,
+				pathname,
 				search:
 					inputQueries || queries
 						? `?search=${convertQueriesToURLQuery(inputQueries || queries)}`
 						: '',
 			});
 		},
-		[queries],
+		[queries, pathname, safeNavigate],
 	);
 
 	useEffect(() => {
@@ -149,8 +152,8 @@ function SearchFilter({
 
 	const clearQueries = (): void => {
 		setQueries([]);
-		history.push({
+		safeNavigate({
-			pathname: history.location.pathname,
+			pathname,
 			search: ``,
 		});
 	};

frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx

@@ -6,7 +6,7 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -36,6 +36,7 @@ export function DeleteButton({
 	const isAuthor = user?.email === createdBy;
 
 	const queryClient = useQueryClient();
+	const { safeNavigate } = useSafeNavigate();
 
 	const { notifications } = useNotifications();
 
@@ -68,7 +69,7 @@ export function DeleteButton({
 							});
 							queryClient.invalidateQueries([REACT_QUERY_KEY.GET_ALL_DASHBOARDS]);
 							if (routeToListPage) {
-								history.replace(ROUTES.ALL_DASHBOARD);
+								safeNavigate(ROUTES.ALL_DASHBOARD);
 							}
 							destroy();
 						},
@@ -86,6 +87,7 @@ export function DeleteButton({
 		t,
 		queryClient,
 		routeToListPage,
+		safeNavigate,
 	]);
 
 	const getDeleteTooltipContent = (): string => {

frontend/src/container/ListOfDashboard/TableComponents/Name.tsx

@@ -1,12 +1,13 @@
 import { LockFilled } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
 import { Data } from '../DashboardsList';
 import { TableLinkText } from './styles';
 
 function Name(name: Data['name'], data: Data): JSX.Element {
 	const { id: DashboardId, isLocked } = data;
+	const { safeNavigate } = useSafeNavigate();
 
 	const getLink = (): string => `${ROUTES.ALL_DASHBOARD}/${DashboardId}`;
 
@@ -14,7 +15,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {
 		if (event.metaKey || event.ctrlKey) {
 			window.open(getLink(), '_blank');
 		} else {
-			history.push(getLink());
+			safeNavigate(getLink());
 		}
 	};
 

frontend/src/container/LiveLogs/BackButton/index.tsx

@@ -8,14 +8,14 @@ import {
 import ROUTES from 'constants/routes';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { constructCompositeQuery } from '../constants';
 
 function BackButton(): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 
 	const { updateAllQueriesOperators } = useQueryBuilder();
 
@@ -40,8 +40,8 @@ function BackButton(): JSX.Element {
 
 		const path = `${ROUTES.LOGS_EXPLORER}?${QueryParams.compositeQuery}=${JSONCompositeQuery}`;
 
-		history.push(path);
+		safeNavigate(path);
-	}, [history, compositeQuery, updateAllQueriesOperators]);
+	}, [safeNavigate, compositeQuery, updateAllQueriesOperators]);
 
 	return (
 		<Button icon={<ArrowLeftOutlined />} onClick={handleBack}>

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -14,7 +14,7 @@ import { prepareQueryRangePayload } from 'lib/dashboard/prepareQueryRangePayload
 import { useEventSource } from 'providers/EventSource';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { AppState } from 'store/reducers';
 import { ILog } from 'types/api/logs/log';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx

@@ -14,7 +14,7 @@ import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/co
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Virtuoso } from 'react-virtuoso';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/LogDetailedView/TableView.tsx

@@ -15,13 +15,13 @@ import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
 import { Pin } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
@@ -68,6 +68,7 @@ function TableView({
 	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
 	const [isfilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
 	const isDarkMode = useIsDarkMode();
+	const { safeNavigate } = useSafeNavigate();
 
 	const [pinnedAttributes, setPinnedAttributes] = useState<
 		Record<string, boolean>
@@ -170,7 +171,7 @@ function TableView({
 				// open the trace in new tab
 				window.open(route, '_blank');
 			} else {
-				history.push(route);
+				safeNavigate(route);
 			}
 		}
 	};

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -14,7 +14,7 @@ import { isEmpty } from 'lodash-es';
 import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import React, { useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 

frontend/src/container/LogDetailedView/index.tsx

@@ -2,12 +2,12 @@ import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ROUTES from 'constants/routes';
 import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString';
 import getStep from 'lib/getStep';
 import { getIdConditions } from 'pages/Logs/utils';
 import { memo, useCallback } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { getLogs } from 'store/actions/logs/getLogs';
@@ -33,7 +33,7 @@ function LogDetailedView({
 	getLogs,
 	getLogsAggregate,
 }: LogDetailedViewProps): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const {
 		detailedLog,
 		searchFilter: { queryString },
@@ -66,9 +66,11 @@ function LogDetailedView({
 				queryString,
 			);
 
-			history.replace(`${ROUTES.OLD_LOGS_EXPLORER}?q=${updatedQueryString}`);
+			safeNavigate(`${ROUTES.OLD_LOGS_EXPLORER}?q=${updatedQueryString}`, {
+				replace: true,
+			});
 		},
-		[history, queryString],
+		[safeNavigate, queryString],
 	);
 
 	const handleClickActionItem = useCallback(

frontend/src/container/Login/index.tsx

@@ -8,12 +8,13 @@ import afterLogin from 'AppRoutes/utils';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { PayloadProps as PrecheckResultType } from 'types/api/user/loginPrecheck';
+import { safeNavigateNoSameURLMemo } from 'utils/navigate';
 
 import { FormContainer, FormWrapper, Label, ParentContainer } from './styles';
 
@@ -39,6 +40,7 @@ function Login({
 	const { t } = useTranslation(['login']);
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const { user } = useAppContext();
+	const { safeNavigate } = useSafeNavigate();
 
 	const [precheckResult, setPrecheckResult] = useState<PrecheckResultType>({
 		sso: false,
@@ -67,7 +69,7 @@ function Login({
 			const { setupCompleted } = getUserVersionResponse.data.payload;
 			if (!setupCompleted) {
 				// no org account registered yet, re-route user to sign up first
-				history.push(ROUTES.SIGN_UP);
+				safeNavigateNoSameURLMemo(ROUTES.SIGN_UP);
 			}
 		}
 	}, [getUserVersionResponse]);
@@ -90,10 +92,10 @@ function Login({
 					LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
 				);
 				if (fromPathname) {
-					history.push(fromPathname);
+					safeNavigateNoSameURLMemo(fromPathname);
 					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
 				} else {
-					history.push(ROUTES.APPLICATION);
+					safeNavigateNoSameURLMemo(ROUTES.APPLICATION);
 				}
 			}
 		}
@@ -287,7 +289,7 @@ function Login({
 							{t('prompt_if_admin')}{' '}
 							<Typography.Link
 								onClick={(): void => {
-									history.push(ROUTES.SIGN_UP);
+									safeNavigate(ROUTES.SIGN_UP);
 								}}
 								style={{ fontWeight: 700 }}
 							>

frontend/src/container/LogsError/LogsError.tsx

@@ -4,15 +4,15 @@ import './LogsError.styles.scss';
 
 import { Typography } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight } from 'lucide-react';
 
 export default function LogsError(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
-
+	const { safeNavigate } = useSafeNavigate();
 	const handleContactSupport = (): void => {
 		if (isCloudUserVal) {
-			history.push('/support');
+			safeNavigate('/support');
 		} else {
 			window.open('https://signoz.io/slack', '_blank');
 		}

frontend/src/container/LogsExplorerChart/index.tsx

@@ -9,7 +9,7 @@ import GetMinMax from 'lib/getMinMax';
 import { colors } from 'lib/getRandomColor';
 import { memo, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 
 import { LogsExplorerChartProps } from './LogsExplorerChart.interfaces';

frontend/src/container/LogsSearchFilter/useSearchParser.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 import { getMinMax } from 'container/TopNav/AutoRefresh/config';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import { parseQuery } from 'lib/logql';
 import isEqual from 'lodash-es/isEqual';
 import { useCallback, useEffect } from 'react';
@@ -24,6 +24,7 @@ export function useSearchParser(): {
 	updateQueryString: (arg0: string) => void;
 } {
 	const dispatch = useDispatch<Dispatch<AppActions>>();
+	const { safeNavigate } = useSafeNavigate();
 	const {
 		searchFilter: { parsedQuery, queryString },
 		order,
@@ -39,10 +40,16 @@ export function useSearchParser(): {
 
 	const updateQueryString = useCallback(
 		(updatedQueryString: string) => {
-			history.replace({
+			// Defaults to the current URL
-				pathname: history.location.pathname,
+			safeNavigate(
-				search: `?${QueryParams.q}=${updatedQueryString}&${QueryParams.order}=${order}`,
+				{
-			});
+					// No need to prepend '?'
+					search: `${QueryParams.q}=${updatedQueryString}&${QueryParams.order}=${order}`,
+				},
+				{
+					replace: true,
+				},
+			);
 
 			const globalTime = getMinMax(selectedTime, minTime, maxTime);
 
@@ -64,7 +71,7 @@ export function useSearchParser(): {
 		},
 		// need to hide this warning as we don't want to update the query string on every change
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[dispatch, parsedQuery, selectedTime, queryString],
+		[dispatch, parsedQuery, selectedTime, queryString, safeNavigate],
 	);
 
 	useEffect(() => {

frontend/src/container/LogsTopNav/index.tsx

@@ -13,16 +13,16 @@ import {
 import { QueryHistoryState } from 'container/LiveLogs/types';
 import LocalTopNav from 'container/LocalTopNav';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback, useMemo } from 'react';
 import { useQueryClient } from 'react-query';
-import { useHistory } from 'react-router-dom';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { LiveButtonStyled } from './styles';
 
 function LogsTopNav(): JSX.Element {
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 	const queryClient = useQueryClient();
 
 	const { stagedQuery, panelType } = useQueryBuilder();
@@ -65,8 +65,9 @@ function LogsTopNav(): JSX.Element {
 
 		const path = `${ROUTES.LIVE_LOGS}?${QueryParams.compositeQuery}=${JSONCompositeQuery}`;
 
-		history.push(path, queryHistoryState);
+		// TODO: SMIT Discuss with reviewer
-	}, [history, panelType, queryClient, stagedQuery]);
+		safeNavigate(path, { state: queryHistoryState });
+	}, [safeNavigate, panelType, queryClient, stagedQuery]);
 
 	const liveButton = useMemo(
 		() => (

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -16,10 +16,9 @@ import {
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import getStep from 'lib/getStep';
-import history from 'lib/history';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 import store from 'store';
 import { UpdateTimeInterval } from 'store/actions';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -40,13 +39,17 @@ import {
 } from './util';
 
 function DBCall(): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 
 	const servicename = decodeURIComponent(encodedServiceName);
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
 	const { queries } = useResourceAttribute();
 	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 	const dispatch = useDispatch();
 
 	const onDragSelect = useCallback(
@@ -57,13 +60,13 @@ function DBCall(): JSX.Element {
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	const tagFilterItems: TagFilterItem[] = useMemo(
@@ -158,7 +161,6 @@ function DBCall(): JSX.Element {
 		servicename,
 		isDBCall: true,
 	});
-	const { safeNavigate } = useSafeNavigate();
 
 	const onGraphClickHandler = useGraphClickHandler(setSelectedTimeStamp);
 

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -18,10 +18,9 @@ import {
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import getStep from 'lib/getStep';
-import history from 'lib/history';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 import store from 'store';
 import { UpdateTimeInterval } from 'store/actions';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -43,10 +42,14 @@ import {
 function External(): JSX.Element {
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
 
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 
 	const servicename = decodeURIComponent(encodedServiceName);
 	const { queries } = useResourceAttribute();
+	const { safeNavigate } = useSafeNavigate();
 
 	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
@@ -60,13 +63,13 @@ function External(): JSX.Element {
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	const tagFilterItems = useMemo(
@@ -221,8 +224,6 @@ function External(): JSX.Element {
 		isExternalCall: true,
 	});
 
-	const { safeNavigate } = useSafeNavigate();
-
 	const onGraphClickHandler = useGraphClickHandler(setSelectedTimeStamp);
 
 	return (

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -16,14 +16,13 @@ import {
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import getStep from 'lib/getStep';
-import history from 'lib/history';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { defaultTo } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -58,7 +57,10 @@ import {
 } from './util';
 
 function Application(): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 	const servicename = decodeURIComponent(encodedServiceName);
 
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
@@ -69,6 +71,7 @@ function Application(): JSX.Element {
 	const { search, pathname } = useLocation();
 	const { queries } = useResourceAttribute();
 	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
 
 	const { featureFlags } = useAppContext();
 	const isSpanMetricEnabled =
@@ -208,13 +211,13 @@ function Application(): JSX.Element {
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			safeNavigate(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
 			}
 		},
-		[dispatch, pathname, urlQuery],
+		[dispatch, pathname, urlQuery, safeNavigate],
 	);
 
 	/**
@@ -253,7 +256,7 @@ function Application(): JSX.Element {
 				queryString,
 			);
 
-			history.push(newPath);
+			safeNavigate(newPath);
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[stepInterval],
@@ -295,7 +298,6 @@ function Application(): JSX.Element {
 			},
 		],
 	});
-	const { safeNavigate } = useSafeNavigate();
 
 	return (
 		<>

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx

@@ -16,7 +16,7 @@ import {
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { apDexMetricsQueryBuilderQueries } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
 import { ReactNode, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
 
@@ -32,7 +32,10 @@ function ApDexMetrics({
 	topLevelOperationsRoute,
 	handleGraphClick,
 }: ApDexMetricsProps): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 	const servicename = decodeURIComponent(encodedServiceName);
 
 	const apDexMetricsWidget = useMemo(

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx

@@ -1,7 +1,7 @@
 import Spinner from 'components/Spinner';
 import { useGetMetricMeta } from 'hooks/apDex/useGetMetricMeta';
 import useErrorNotification from 'hooks/useErrorNotification';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { IServiceName } from '../../types';
 import ApDexMetrics from './ApDexMetrics';
@@ -15,7 +15,10 @@ function ApDexMetricsApplication({
 	thresholdValue,
 	topLevelOperationsRoute,
 }: ApDexDataSwitcherProps): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 	const servicename = decodeURIComponent(encodedServiceName);
 
 	const { data, isLoading, error } = useGetMetricMeta(metricMeta, servicename);

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx

@@ -7,7 +7,7 @@ import { GraphTitle } from 'container/MetricsApplication/constant';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { apDexTracesQueryBuilderQueries } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
 import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
 
@@ -21,7 +21,10 @@ function ApDexTraces({
 	tagFilterItems,
 	thresholdValue,
 }: ApDexDataSwitcherProps): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 	const servicename = decodeURIComponent(encodedServiceName);
 
 	const apDexTracesWidget = useMemo(

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx

@@ -3,7 +3,7 @@ import { Card, GraphContainer } from 'container/MetricsApplication/styles';
 import { useGetApDexSettings } from 'hooks/apDex/useGetApDexSettings';
 import useErrorNotification from 'hooks/useErrorNotification';
 import { memo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { IServiceName } from '../../types';
 import ApDexMetricsApplication from './ApDexMetricsApplication';
@@ -15,7 +15,10 @@ function ApDexApplication({
 	topLevelOperationsRoute,
 	tagFilterItems,
 }: ApDexApplicationProps): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 	const servicename = decodeURIComponent(encodedServiceName);
 
 	const { data, isLoading, error, isRefetching } = useGetApDexSettings(

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -16,7 +16,7 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { useAppContext } from 'providers/App/App';
 import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
 
@@ -38,7 +38,10 @@ function ServiceOverview({
 	topLevelOperationsIsLoading,
 	stepInterval,
 }: ServiceOverviewProps): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 	const servicename = decodeURIComponent(encodedServiceName);
 
 	const { featureFlags } = useAppContext();

frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx

@@ -5,7 +5,7 @@ import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute
 import { useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { AppState } from 'store/reducers';
 import { PayloadProps } from 'types/api/metrics/getTopOperations';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -15,9 +15,10 @@ function TopOperation(): JSX.Element {
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
-	const { servicename: encodedServiceName } = useParams<{
+	// Temp: Hard type casting for string | undefined
+	const { servicename: encodedServiceName } = (useParams() as unknown) as {
 		servicename?: string;
-	}>();
+	};
 	const servicename = decodeURIComponent(encodedServiceName || '');
 
 	const { queries } = useResourceAttribute();

frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx

@@ -12,7 +12,7 @@ import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { ReactNode, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { AppState } from 'store/reducers';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -24,7 +24,10 @@ import ColumnWithLink from './TableRenderer/ColumnWithLink';
 import { getTableColumnRenderer } from './TableRenderer/TableColumnRenderer';
 
 function TopOperationMetrics(): JSX.Element {
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 	const servicename = decodeURIComponent(encodedServiceName);
 
 	const { notifications } = useNotifications();

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -11,7 +11,7 @@ import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -31,7 +31,10 @@ function TopOperationsTable({
 	isLoading,
 }: TopOperationsTableProps): JSX.Element {
 	const searchInput = useRef<InputRef>(null);
-	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		servicename: encodedServiceName,
+	} = (useParams() as unknown) as IServiceName;
 	const { safeNavigate } = useSafeNavigate();
 	const servicename = decodeURIComponent(encodedServiceName);
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
@@ -45,7 +48,8 @@ function TopOperationsTable({
 
 	const apmToTraceQuery = useGetAPMToTracesQueries({ servicename });
 
-	const params = useParams<{ servicename: string }>();
+	// Temp: Hard type casting for string | undefined
+	const params = (useParams() as unknown) as { servicename: string };
 
 	const handleOnClick = (operation: string): void => {
 		const { servicename: encodedServiceName } = params;

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -4,10 +4,9 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
 import { useMemo } from 'react';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
 
@@ -27,7 +26,7 @@ function DashboardsAndAlertsPopover({
 						key={alert.alert_id}
 						onClick={(): void => {
 							params.set(QueryParams.ruleId, alert.alert_id);
-							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+							safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
@@ -37,7 +36,7 @@ function DashboardsAndAlertsPopover({
 			}));
 		}
 		return null;
-	}, [alerts, params]);
+	}, [alerts, params, safeNavigate]);
 
 	const uniqueDashboards = useMemo(
 		() =>

frontend/src/container/NewDashboard/ComponentsSlider/index.tsx

@@ -4,9 +4,10 @@ import { Card, Modal } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
-import history from 'lib/history';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useLocation } from 'react-router';
 import { LogsAggregatorOperator } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
 
@@ -16,7 +17,8 @@ import { Text } from './styles';
 
 function DashboardGraphSlider(): JSX.Element {
 	const { handleToggleDashboardSlider, isDashboardSliderOpen } = useDashboard();
-
+	const { safeNavigate } = useSafeNavigate();
+	const location = useLocation();
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const onClickHandler = (name: PANEL_TYPES) => (): void => {
 		const id = uuid();
@@ -56,13 +58,11 @@ function DashboardGraphSlider(): JSX.Element {
 			),
 		};
 		if (name === PANEL_TYPES.LIST) {
-			history.push(
+			safeNavigate(
-				`${history.location.pathname}/new?${createQueryParams(queryParamsLog)}`,
+				`${location.pathname}/new?${createQueryParams(queryParamsLog)}`,
 			);
 		} else {
-			history.push(
+			safeNavigate(`${location.pathname}/new?${createQueryParams(queryParams)}`);
-				`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
-			);
 		}
 	};
 

frontend/src/container/NewDashboard/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -2,7 +2,8 @@ import { getNonIntegrationDashboardById } from 'mocks-server/__mockdata__/dashbo
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
-import { MemoryRouter, useLocation } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import DashboardDescription from '..';

frontend/src/container/NewExplorerCTA/index.tsx

@@ -1,14 +1,15 @@
 import { CompassOutlined } from '@ant-design/icons';
 import { Badge, Button } from 'antd';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useCallback, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import { buttonText, RIBBON_STYLES } from './config';
 
 function NewExplorerCTA(): JSX.Element | null {
 	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
 
 	const isTraceOrLogsExplorerPage = useMemo(
 		() =>
@@ -21,15 +22,15 @@ function NewExplorerCTA(): JSX.Element | null {
 
 	const onClickHandler = useCallback((): void => {
 		if (location.pathname === ROUTES.LOGS_EXPLORER) {
-			history.push(ROUTES.OLD_LOGS_EXPLORER);
+			safeNavigate(ROUTES.OLD_LOGS_EXPLORER);
 		} else if (location.pathname === ROUTES.TRACE) {
-			history.push(ROUTES.TRACES_EXPLORER);
+			safeNavigate(ROUTES.TRACES_EXPLORER);
 		} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
-			history.push(ROUTES.LOGS_EXPLORER);
+			safeNavigate(ROUTES.LOGS_EXPLORER);
 		} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
-			history.push(ROUTES.TRACE);
+			safeNavigate(ROUTES.TRACE);
 		}
-	}, [location.pathname]);
+	}, [location.pathname, safeNavigate]);
 
 	const button = useMemo(
 		() => (

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx

@@ -22,7 +22,7 @@ import {
 } from 'react';
 import { UseQueryResult } from 'react-query';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { UpdateTimeInterval } from 'store/actions';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/__tests__/ColumnSelector.test.tsx

@@ -1,6 +1,6 @@
 import ROUTES from 'constants/routes';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { render } from 'tests/test-utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 

frontend/src/container/NewWidget/index.tsx

@@ -35,7 +35,7 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { generatePath, useParams } from 'react-router-dom';
+import { generatePath, useParams } from 'react-router';
 import { AppState } from 'store/reducers';
 import { ColumnUnit, Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import { IField } from 'types/api/logs/fields';
@@ -101,7 +101,8 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 
 	const query = useUrlQuery();
 
-	const { dashboardId } = useParams<DashboardWidgetPageParams>();
+	// Temp: Hard type casting for string | undefined
+	const { dashboardId } = (useParams() as unknown) as DashboardWidgetPageParams;
 
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
 

frontend/src/container/NoLogs/NoLogs.tsx

@@ -4,7 +4,7 @@ import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowUpRight } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';
 import DOCLINKS from 'utils/docLinks';
@@ -15,6 +15,7 @@ export default function NoLogs({
 	dataSource: DataSource;
 }): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const { safeNavigate } = useSafeNavigate();
 
 	const handleLinkClick = (
 		e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
@@ -28,7 +29,7 @@ export default function NoLogs({
 			} else if (dataSource === DataSource.LOGS) {
 				logEvent('Logs Explorer: Navigate to onboarding', {});
 			}
-			history.push(
+			safeNavigate(
 				dataSource === 'traces'
 					? ROUTES.GET_STARTED_APPLICATION_MONITORING
 					: ROUTES.GET_STARTED_LOGS_MANAGEMENT,

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -12,12 +12,13 @@ import ROUTES from 'constants/routes';
 import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
 import InviteUserModal from 'container/OrganizationSettings/InviteUserModal/InviteUserModal';
 import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingInvitesContainer';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { UserPlus } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
+import { useLocation } from 'react-router';
 import { useEffectOnce } from 'react-use';
 
 import ModuleStepsContainer from './common/ModuleStepsContainer/ModuleStepsContainer';
@@ -105,8 +106,9 @@ export default function Onboarding(): JSX.Element {
 	const [selectedModuleSteps, setSelectedModuleSteps] = useState(APM_STEPS);
 	const [activeStep, setActiveStep] = useState(1);
 	const [current, setCurrent] = useState(0);
-	const { location } = history;
+	const location = useLocation();
 	const { t } = useTranslation(['onboarding']);
+	const { safeNavigate } = useSafeNavigate();
 
 	const { featureFlags } = useAppContext();
 	const isOnboardingV3Enabled = featureFlags?.find(
@@ -254,7 +256,7 @@ export default function Onboarding(): JSX.Element {
 
 	const handleNext = (): void => {
 		if (activeStep <= 3) {
-			history.push(moduleRouteMap[selectedModule.id as ModulesMap]);
+			safeNavigate(moduleRouteMap[selectedModule.id as ModulesMap]);
 		}
 	};
 
@@ -319,7 +321,7 @@ export default function Onboarding(): JSX.Element {
 					<div
 						onClick={(): void => {
 							logEvent('Onboarding V2: Skip Button Clicked', {});
-							history.push(ROUTES.APPLICATION);
+							safeNavigate(ROUTES.APPLICATION);
 						}}
 						className="skip-to-console"
 					>
@@ -393,9 +395,9 @@ export default function Onboarding(): JSX.Element {
 							resetProgress();
 
 							if (isOnboardingV3Enabled) {
-								history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+								safeNavigate(ROUTES.GET_STARTED_WITH_CLOUD);
 							} else {
-								history.push(ROUTES.GET_STARTED);
+								safeNavigate(ROUTES.GET_STARTED);
 							}
 						}}
 						selectedModule={selectedModule}

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -20,11 +20,11 @@ import {
 	messagingQueueKakfaSupportedDataSources,
 } from 'container/OnboardingContainer/utils/dataSourceUtils';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Blocks, Check } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 export interface DataSourceType {
@@ -37,7 +37,7 @@ export interface DataSourceType {
 export default function DataSource(): JSX.Element {
 	const [form] = Form.useForm();
 	const { t } = useTranslation(['common']);
-	const history = useHistory();
+	const { safeNavigate } = useSafeNavigate();
 
 	const getStartedSource = useUrlQuery().get(QueryParams.getStartedSource);
 
@@ -147,7 +147,7 @@ export default function DataSource(): JSX.Element {
 			dataSource: selectedDataSource?.name,
 			framework: selectedFramework,
 		});
-		history.push(ROUTES.INTEGRATIONS);
+		safeNavigate(ROUTES.INTEGRATIONS);
 	};
 
 	return (

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx

@@ -17,7 +17,7 @@ import ROUTES from 'constants/routes';
 import { stepsMap } from 'container/OnboardingContainer/constants/stepsConfig';
 import { DataSourceType } from 'container/OnboardingContainer/Steps/DataSource/DataSource';
 import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUtils';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty, isNull } from 'lodash-es';
 import { UserPlus } from 'lucide-react';
 import { SetStateAction, useState } from 'react';
@@ -83,6 +83,8 @@ export default function ModuleStepsContainer({
 	const [metaData, setMetaData] = useState<MetaDataProps[]>(defaultMetaData);
 	const lastStepIndex = selectedModuleSteps.length - 1;
 
+	const { safeNavigate } = useSafeNavigate();
+
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const isValidForm = (): boolean => {
 		const { id: selectedModuleID } = selectedModule;
@@ -153,15 +155,15 @@ export default function ModuleStepsContainer({
 		});
 
 		if (selectedModule.id === ModulesMap.APM) {
-			history.push(ROUTES.APPLICATION);
+			safeNavigate(ROUTES.APPLICATION);
 		} else if (selectedModule.id === ModulesMap.LogsManagement) {
-			history.push(ROUTES.LOGS_EXPLORER);
+			safeNavigate(ROUTES.LOGS_EXPLORER);
 		} else if (selectedModule.id === ModulesMap.InfrastructureMonitoring) {
-			history.push(ROUTES.APPLICATION);
+			safeNavigate(ROUTES.APPLICATION);
 		} else if (selectedModule.id === ModulesMap.AwsMonitoring) {
-			history.push(ROUTES.APPLICATION);
+			safeNavigate(ROUTES.APPLICATION);
 		} else {
-			history.push(ROUTES.APPLICATION);
+			safeNavigate(ROUTES.APPLICATION);
 		}
 	};
 
@@ -380,7 +382,7 @@ export default function ModuleStepsContainer({
 	};
 
 	const handleLogoClick = (): void => {
-		history.push('/home');
+		safeNavigate('/home');
 	};
 
 	return (

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -11,7 +11,7 @@ import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
 import { InviteTeamMembersProps } from 'container/OrganizationSettings/PendingInvitesContainer';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
@@ -72,6 +72,7 @@ function OnboardingQuestionaire(): JSX.Element {
 	const [signozDetails, setSignozDetails] = useState<SignozDetails>(
 		INITIAL_SIGNOZ_DETAILS,
 	);
+	const { safeNavigate } = useSafeNavigate();
 
 	const [
 		optimiseSignozDetails,
@@ -122,9 +123,9 @@ function OnboardingQuestionaire(): JSX.Element {
 			logEvent('Org Onboarding: Redirecting to Get Started', {});
 
 			if (isOnboardingV3Enabled) {
-				history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+				safeNavigate(ROUTES.GET_STARTED_WITH_CLOUD);
 			} else {
-				history.push(ROUTES.GET_STARTED);
+				safeNavigate(ROUTES.GET_STARTED);
 			}
 		},
 		onError: () => {

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -16,7 +16,7 @@ import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import ROUTES from 'constants/routes';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import history from 'lib/history';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import { CheckIcon, Goal, UserPlus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
@@ -120,6 +120,7 @@ function OnboardingAddDataSource(): JSX.Element {
 	const question2Ref = useRef<HTMLDivElement | null>(null);
 	const question3Ref = useRef<HTMLDivElement | null>(null);
 	const configureProdRef = useRef<HTMLDivElement | null>(null);
+	const { safeNavigate } = useSafeNavigate();
 
 	const [showConfigureProduct, setShowConfigureProduct] = useState<boolean>(
 		false,
@@ -417,22 +418,22 @@ function OnboardingAddDataSource(): JSX.Element {
 		} else if (step === 3) {
 			switch (selectedDataSource?.module) {
 				case 'apm':
-					history.push(ROUTES.APPLICATION);
+					safeNavigate(ROUTES.APPLICATION);
 					break;
 				case 'logs':
-					history.push(ROUTES.LOGS);
+					safeNavigate(ROUTES.LOGS);
 					break;
 				case 'metrics':
-					history.push(ROUTES.ALL_DASHBOARD);
+					safeNavigate(ROUTES.ALL_DASHBOARD);
 					break;
 				case 'infra-monitoring-hosts':
-					history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+					safeNavigate(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
 					break;
 				case 'infra-monitoring-k8s':
-					history.push(ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES);
+					safeNavigate(ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES);
 					break;
 				default:
-					history.push(ROUTES.APPLICATION);
+					safeNavigate(ROUTES.APPLICATION);
 			}
 		}
 	};
@@ -590,7 +591,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										},
 									);
 
-									history.push(ROUTES.HOME);
+									safeNavigate(ROUTES.HOME);
 								}}
 							/>
 							<Typography.Text>Get Started (2/4)</Typography.Text>

frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx

@@ -11,7 +11,7 @@ import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useCopyToClipboard } from 'react-use';
 import { PayloadProps } from 'types/api/user/getPendingInvites';
 import { ROLES } from 'types/roles';

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -9,7 +9,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { useEffect, useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
 import { Span } from 'types/api/trace/getTraceV2';
 
@@ -34,7 +34,10 @@ function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
 		traceFlamegraphStatsWidth,
 		selectedSpan,
 	} = props;
-	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
+	// Temp: Hard type casting for string | undefined
+	const {
+		id: traceId,
+	} = (useParams() as unknown) as TraceDetailFlamegraphURLProps;
 	const urlQuery = useUrlQuery();
 	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
 		urlQuery.get('spanId') || '',