Reactjs Next.js无法预呈现错误页面

我最近开始在一个新项目上使用Next.JS，它工作得很好，但当我点击错误链接后抛出404错误时，我不知道如何在客户端保持布局状态处于活动状态

感谢，我能够在不同页面之间共享我的状态：

在主页上

在“关于”页上

但是如果我单击“error”，它将呈现_error.tsx，而不保留我在输入中写入的数据。

尽管我提供了相同的布局，但这个页面似乎在服务器端呈现了整个应用程序树。是否可以像普通页面一样预取此页面，避免在不使用Redux之类的解决方案的情况下丢失一些信息？我对它很熟悉，在这种情况下似乎有点太多了

这是我的密码： pages/_error.tsx

import { getLayout } from "../components/layout/mainLayout"
import { withTranslation } from "../i18n";
import { FlexDirectionProperty } from "csstype";

const imgStyle = {
  maxWidth: "100%",
  maxHeight: "100%"
};

const figureStyle = {
  height: "80vh",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexDirection: "column" as FlexDirectionProperty
};

const CustomError: any = ({ status, t }: any) => (
  <>
    <figure style={figureStyle}>
      <figcaption>
        <h1>Statut:{t('WELCOME')}</h1>
      </figcaption>
      <img
        alt="Showing a properly cat according the status code"
        src={`https://http.cat/${status}`}
        style={imgStyle}
      />
    </figure>
  </>
)

CustomError.getLayout = getLayout;

CustomError.getInitialProps = async ({ res, err }: any) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : null

  return {
    statusCode: statusCode,
    namespacesRequired: ["common"]
  }
};

export default withTranslation('common')(CustomError)

从“./components/layout/mainLayout”导入{getLayout}
从“./i18n”导入{withTranslation}；
从“csstype”导入{FlexDirectionProperty}；
常数imgStyle={
最大宽度：“100%”，
最大高度：“100%”
};
常量图形样式={
高度：“80vh”，
显示：“flex”，
辩护内容：“中心”，
对齐项目：“中心”，
flexDirection：“列”作为FlexDirectionProperty
};
const CustomError:any=（{status，t}:any）=>(
状态：{t（'WELCOME'）}
)
CustomError.getLayout=getLayout；
CustomError.getInitialProps=async（{res，err}:any）=>{
const statusCode=res？res.statusCode:err？err.statusCode:null
返回{
状态代码：状态代码，
需要名称空间：[“通用”]
}
};
导出带翻译的默认值（'common'）（CustomError）

组件/布局/标题.tsx

import Link from "next/link";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import { withTranslation, i18n } from "../../i18n";
import { capitalize } from "../../helpers/utils";
import Modal from "react-bootstrap/Modal";
import { useState } from "react";

const loadStamp = +new Date();

const Header: any = ({ t }: any) => {
  const [show, setShow] = useState(false);
  const [active, setActive] = useState("home");

  return (
    <>
      <Navbar fixed="top" bg="light">
        <Nav className="mr-auto" activeKey={active}>
          <Nav.Item>
            <Link href="/">
              <Navbar.Brand onClick={() => setActive("home")} href="/">Random Project</Navbar.Brand>
            </Link>
          </Nav.Item>
          ...
        </Nav>
      </Navbar>
    </>);
};

export default withTranslation("common")(Header);

从“下一个/链接”导入链接；
从“反应引导/Navbar”导入Navbar；
从“反应引导/Nav”导入Nav；
从“react引导/表单”导入表单；
从“反应引导/按钮”导入按钮；
从“../../i18n”导入{withTranslation，i18n}”；
从“./../helpers/utils”导入{capitalize}”；
从“反应引导/模式”导入模式；
从“react”导入{useState}；
const loadStamp=+新日期（）；
常量头：any=（{t}:any）=>{
const[show，setShow]=useState（false）；
const[active，setActive]=useState（“home”）；
返回(
setActive（“home”）}href=“/”>随机项目
...
);
};
导出默认值和翻译（“通用”）（标题）；

组件/layout/mainloayout.tsx

import Header from "./header";
import "bootstrap/dist/css/bootstrap.min.css";
import "../../public/stylesheets/style.scss";

type LayoutProps = {
  title?: string;
  children: any;
};

const Layout: React.FunctionComponent<LayoutProps> = ({ children }) => (
  <>
    <Header />
    <main role="main" className="main">
      {children}
    </main>
  </>
);

export const getLayout: any = (page: any) => <Layout>{page}</Layout>

export default Layout

从“/Header”导入标题；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“../../public/stylesheets/style.scss”；
类型LayoutProps={
标题？：字符串；
儿童：任何；
};
常量布局：React.FunctionComponent=（{children}）=>(
{儿童}
);
export const getLayout:any=（page:any）=>{page}
导出默认布局

还有我的_app.tsx

import React from 'react'
import App from 'next/app'
import { appWithTranslation } from '../i18n'

class MyApp extends App<any> {

    render() {
        const { Component, pageProps } = this.props
        const getLayout = Component.getLayout || ((page: any) => page)

        return (
            <>
                {getLayout(
                    <Component {...pageProps}></Component>
                )}
            </>
        )
    }
}

export default appWithTranslation(MyApp)

从“React”导入React
从“下一个/应用程序”导入应用程序
从“../i18n”导入{appWithTranslation}
类MyApp扩展了应用程序{
render（）{
const{Component，pageProps}=this.props
const getLayout=Component.getLayout | |（（第页：任意）=>第页）
返回(
{getLayout(
)}
)
}
}
导出默认appWithTranslation（MyApp）