Function ErrorPage

src/Components/Errors/ErrorPage.jsx:14–104

()

}

export default function ErrorPage() {
    const error = useRouteError();
    const navigate = useNavigate();
    const dark = useTheme().palette.mode === 'dark';

    const isNetwork = error?.message === 'Failed to fetch';
    const status = typeof error?.status === 'number' ? error.status : null;
    const message = isNetwork
        ? NetworkBrokeMessage
        : (error?.statusText || error?.message || "发生了未知错误，请稍后再试。");
    const title = isNetwork ? '网络连接异常' : status === 404 ? '页面走丢了' : '出错了';
    const Icon = isNetwork ? CloudOffOutlined : SentimentDissatisfiedOutlined;

    return (
        <Box sx={{
            width: '100%',
            minHeight: '70vh',
            flexGrow: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            px: 2,
            py: 6,
        }}>
            <Paper
                elevation={0}
                sx={{
                    width: '100%',
                    maxWidth: 480,
                    bgcolor: (theme) => theme.palette.surface,
                    borderRadius: 3,
                    p: {xs: 3, sm: 4.5},
                    textAlign: 'center',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    gap: 2,
                }}
            >
                {status && status !== 404 ? (
                    <Typography sx={{
                        fontWeight: 800,
                        fontSize: {xs: '3.5rem', sm: '4.5rem'},
                        lineHeight: 1,
                        display: 'inline-block',
                        background: brandGradient(dark),
                        backgroundClip: 'text',
                        WebkitBackgroundClip: 'text',
                        color: 'transparent',
                        WebkitTextFillColor: 'transparent',
                    }}>
                        {status}
                    </Typography>
                ) : (
                    <Box sx={{
                        width: 72,
                        height: 72,
                        borderRadius: '50%',