fix: 404 page layout (#16044)

* fix: 404 page layout

* Fix 404 page layout issue
This commit is contained in:
Sachin Chaurasiya 2024-04-26 00:42:37 +05:30 committed by GitHub
parent a9773b9527
commit a526aa55e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 11 additions and 21 deletions

View File

@ -19,6 +19,7 @@ import { Redirect, Route, Switch } from 'react-router-dom';
import { ROUTES } from '../../constants/constants';
import { useApplicationStore } from '../../hooks/useApplicationStore';
import { useDomainStore } from '../../hooks/useDomainStore';
import PageNotFound from '../../pages/PageNotFound/PageNotFound';
import SignUpPage from '../../pages/SignUp/SignUpPage';
import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase';
import Appbar from '../AppBar/Appbar';
@ -46,6 +47,8 @@ const AppContainer = () => {
<Route exact component={SignUpPage} path={ROUTES.SIGNUP}>
{!isEmpty(currentUser) && <Redirect to={ROUTES.HOME} />}
</Route>
{/* Do not move this route as we don't want to render the sidebar and header in 404 page */}
<Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
<Layout className="app-container">
<Sider

View File

@ -13,18 +13,12 @@
import { isNil } from 'lodash';
import React, { useCallback, useEffect } from 'react';
import { Route, Switch, useLocation } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { useAnalytics } from 'use-analytics';
import AppContainer from '../../components/AppContainer/AppContainer';
import { ROUTES } from '../../constants/constants';
import { CustomEventTypes } from '../../generated/analytics/webAnalyticEventData';
import { useApplicationStore } from '../../hooks/useApplicationStore';
import AppContainer from '../AppContainer/AppContainer';
import { UnAuthenticatedAppRouter } from './UnAuthenticatedAppRouter';
import withSuspenseFallback from './withSuspenseFallback';
const PageNotFound = withSuspenseFallback(
React.lazy(() => import('../../pages/PageNotFound/PageNotFound'))
);
const AppRouter = () => {
const location = useLocation();
@ -70,12 +64,7 @@ const AppRouter = () => {
return () => targetNode.removeEventListener('click', handleClickEvent);
}, [handleClickEvent]);
return (
<Switch>
{isAuthenticated ? <AppContainer /> : <UnAuthenticatedAppRouter />}
<Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
</Switch>
);
return isAuthenticated ? <AppContainer /> : <UnAuthenticatedAppRouter />;
};
export default AppRouter;

View File

@ -224,10 +224,6 @@ const AddQueryPage = withSuspenseFallback(
React.lazy(() => import('../../pages/AddQueryPage/AddQueryPage.component'))
);
const PageNotFound = withSuspenseFallback(
React.lazy(() => import('../../pages/PageNotFound/PageNotFound'))
);
const IncidentManagerPage = withSuspenseFallback(
React.lazy(() => import('../../pages/IncidentManager/IncidentManagerPage'))
);
@ -508,7 +504,7 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
]}>
<Redirect to={ROUTES.MY_DATA} />
</Route>
<Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
<Redirect to={ROUTES.NOT_FOUND} />
</Switch>
);

View File

@ -16,6 +16,7 @@ import { Redirect, Route, Switch } from 'react-router-dom';
import { ROUTES } from '../../constants/constants';
import { AuthProvider } from '../../generated/configuration/authenticationConfiguration';
import { useApplicationStore } from '../../hooks/useApplicationStore';
import PageNotFound from '../../pages/PageNotFound/PageNotFound';
import SamlCallback from '../../pages/SamlCallback';
import AccountActivationConfirmation from '../../pages/SignUp/account-activation-confirmation.component';
import { isProtectedRoute } from '../../utils/AuthProvider.util';
@ -83,6 +84,9 @@ export const UnAuthenticatedAppRouter = () => {
</Route>
)}
{/* keep this route before any conditional JSX.Element rendering */}
<Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
{isBasicAuthProvider && (
<>
<Route exact component={BasicSignupPage} path={ROUTES.REGISTER} />

View File

@ -26,7 +26,6 @@ import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
import { ROUTES } from '../../../constants/constants';
import { useApplicationStore } from '../../../hooks/useApplicationStore';
import SignInPage from '../../../pages/LoginPage/SignInPage';
import PageNotFound from '../../../pages/PageNotFound/PageNotFound';
import { showErrorToast } from '../../../utils/ToastUtils';
import Loader from '../../common/Loader/Loader';
import {
@ -121,7 +120,6 @@ const OidcAuthenticator = forwardRef<AuthenticatorRef, Props>(
<Redirect to={ROUTES.MY_DATA} />
)}
</Route>
<Route exact component={PageNotFound} path={ROUTES.NOT_FOUND} />
{!isSigningIn ? (
<Route exact component={SignInPage} path={ROUTES.SIGNIN} />
) : null}