mirror of https://gitee.com/answerdev/answer.git
fix: Unified handling of `HttpErrorContent` and `RouteErrorBoundary`
This commit is contained in:
parent
2e61aada50
commit
d80d34419d
|
@ -1,4 +1,4 @@
|
||||||
import { memo } from 'react';
|
import { memo, useEffect } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
@ -6,13 +6,28 @@ import { usePageTags } from '@/hooks';
|
||||||
|
|
||||||
const Index = ({ httpCode = '', errMsg = '' }) => {
|
const Index = ({ httpCode = '', errMsg = '' }) => {
|
||||||
const { t } = useTranslation('translation', { keyPrefix: 'page_error' });
|
const { t } = useTranslation('translation', { keyPrefix: 'page_error' });
|
||||||
|
useEffect(() => {
|
||||||
|
// auto height of container
|
||||||
|
const pageWrap = document.querySelector('.page-wrap');
|
||||||
|
if (pageWrap) {
|
||||||
|
// @ts-ignore
|
||||||
|
pageWrap.style.display = 'contents';
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (pageWrap) {
|
||||||
|
// @ts-ignore
|
||||||
|
pageWrap.style.display = 'block';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
usePageTags({
|
usePageTags({
|
||||||
title: t(`http_${httpCode}`, { keyPrefix: 'page_title' }),
|
title: t(`http_${httpCode}`, { keyPrefix: 'page_title' }),
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="d-flex flex-column flex-shrink-1 flex-grow-1 justify-content-center align-items-center">
|
||||||
<div
|
<div
|
||||||
className="mb-4 text-secondary"
|
className="mb-4 text-secondary"
|
||||||
style={{ fontSize: '120px', lineHeight: 1.2 }}>
|
style={{ fontSize: '120px', lineHeight: 1.2 }}>
|
||||||
|
@ -27,7 +42,7 @@ const Index = ({ httpCode = '', errMsg = '' }) => {
|
||||||
{t('back_home')}
|
{t('back_home')}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,27 +1,8 @@
|
||||||
/* eslint-disable import/no-unresolved */
|
// eslint-disable-next-line import/no-unresolved
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { Container } from 'react-bootstrap';
|
|
||||||
|
|
||||||
import { HttpErrorContent } from '@/components';
|
import { HttpErrorContent } from '@/components';
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
useEffect(() => {
|
return <HttpErrorContent httpCode="404" />;
|
||||||
// auto height of container
|
|
||||||
const pageWrap = document.querySelector('.page-wrap');
|
|
||||||
pageWrap.style.display = 'contents';
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
pageWrap.style.display = 'block';
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container
|
|
||||||
className="d-flex flex-column justify-content-center align-items-center"
|
|
||||||
style={{ flex: 1 }}>
|
|
||||||
<HttpErrorContent httpCode="404" />
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Index;
|
export default Index;
|
||||||
|
|
|
@ -1,27 +1,8 @@
|
||||||
/* eslint-disable import/no-unresolved */
|
// eslint-disable-next-line import/no-unresolved
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { Container } from 'react-bootstrap';
|
|
||||||
|
|
||||||
import { HttpErrorContent } from '@/components';
|
import { HttpErrorContent } from '@/components';
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
useEffect(() => {
|
return <HttpErrorContent httpCode="50X" />;
|
||||||
// auto height of container
|
|
||||||
const pageWrap = document.querySelector('.page-wrap');
|
|
||||||
pageWrap.style.display = 'contents';
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
pageWrap.style.display = 'block';
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container
|
|
||||||
className="d-flex flex-column justify-content-center align-items-center"
|
|
||||||
style={{ flex: 1 }}>
|
|
||||||
<HttpErrorContent httpCode="50X" />
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Index;
|
export default Index;
|
||||||
|
|
|
@ -42,14 +42,9 @@ const Layout: FC = () => {
|
||||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
|
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
|
||||||
<div
|
<div
|
||||||
className="position-relative page-wrap"
|
className="position-relative page-wrap"
|
||||||
style={{ display: httpStatusCode ? 'contents' : 'block' }}
|
|
||||||
onClick={imgViewer.checkClickForImgView}>
|
onClick={imgViewer.checkClickForImgView}>
|
||||||
{httpStatusCode ? (
|
{httpStatusCode ? (
|
||||||
<div
|
|
||||||
className="d-flex flex-column justify-content-center align-items-center"
|
|
||||||
style={{ flex: 1 }}>
|
|
||||||
<HttpErrorContent httpCode={httpStatusCode} />
|
<HttpErrorContent httpCode={httpStatusCode} />
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
<Outlet />
|
<Outlet />
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
import Error50X from '@/pages/50X';
|
import { HttpErrorContent } from '@/components';
|
||||||
// import Page404 from '@/pages/404';
|
|
||||||
|
|
||||||
const Index = () => {
|
const Index = ({ errCode = '50X', errMsg = '' }) => {
|
||||||
return <Error50X />;
|
return <HttpErrorContent httpCode={errCode} errMsg={errMsg} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Index;
|
export default Index;
|
||||||
|
|
|
@ -3,7 +3,8 @@ import { useLocation, useNavigate, useLoaderData } from 'react-router-dom';
|
||||||
|
|
||||||
import { floppyNavigation } from '@/utils';
|
import { floppyNavigation } from '@/utils';
|
||||||
import { TGuardFunc } from '@/utils/guard';
|
import { TGuardFunc } from '@/utils/guard';
|
||||||
import { errorCodeStore } from '@/stores';
|
|
||||||
|
import RouteErrorBoundary from './RouteErrorBoundary';
|
||||||
|
|
||||||
const RouteGuard: FC<{
|
const RouteGuard: FC<{
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
|
@ -20,20 +21,14 @@ const RouteGuard: FC<{
|
||||||
page,
|
page,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { update: updateHttpError } = errorCodeStore();
|
let guardError;
|
||||||
const handleGuardError = () => {
|
const errCode = gr.error?.code;
|
||||||
const err = gr.error;
|
|
||||||
let errCode = err?.code;
|
|
||||||
if (errCode && typeof errCode !== 'string') {
|
|
||||||
errCode = errCode.toString();
|
|
||||||
}
|
|
||||||
if (errCode === '403' || errCode === '404' || errCode === '50X') {
|
if (errCode === '403' || errCode === '404' || errCode === '50X') {
|
||||||
updateHttpError(errCode, err?.msg);
|
guardError = {
|
||||||
}
|
code: errCode,
|
||||||
|
msg: gr.error?.msg,
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
}
|
||||||
handleGuardError();
|
|
||||||
}, [gr.error]);
|
|
||||||
const handleGuardRedirect = () => {
|
const handleGuardRedirect = () => {
|
||||||
const redirectUrl = gr.redirect;
|
const redirectUrl = gr.redirect;
|
||||||
if (redirectUrl) {
|
if (redirectUrl) {
|
||||||
|
@ -47,8 +42,10 @@ const RouteGuard: FC<{
|
||||||
}, [location]);
|
}, [location]);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Route Guard */}
|
|
||||||
{gr.ok ? children : null}
|
{gr.ok ? children : null}
|
||||||
|
{!gr.ok && guardError ? (
|
||||||
|
<RouteErrorBoundary errCode={guardError.code} />
|
||||||
|
) : null}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue