Gatsby 404 页面无法在生产中运行

Question

我在 cPanel 上部署了一个 Gatsby 站点，并在 src/pages 目录中包含一个自定义 404.js 页面。 404 页面在本地按预期工作，但在生产中，当用户访问无效 URL 时，他们会被重定向到 / 。 Gatsby build 按照文档的预期创建一个 /404/index.html 文件和一个 /404.html 文件。可能是什么原因造成的？我该如何解决？我有盖茨比 v5.12.11

我在构建命令之前尝试过 gatsby clean，并且在每次构建后尝试使用私人浏览器。我尝试使用以下代码在文件管理器中添加 .htaccess 文件：

ErrorDocument 404 /404.html

我尝试在项目的根目录添加一个 gatsby-node.js 文件，其中包含以下代码的几种变体：

exports.createPages = async ({ graphql, actions }) => {
  const { createRedirect } = actions;

  createRedirect({
    fromPath: `/*`,
    toPath: `/404.html`,
    statusCode: 404,
  });
};

这是我的 gatsby-config.js 文件，如果这有什么不同的话：

/**
 * @type {import('gatsby').GatsbyConfig}
 */

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  siteMetadata: {
    title: `test-gatsby`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [
    `gatsby-plugin-preload-fonts`,
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    `gatsby-plugin-react-helmet-async`,
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: `gatsby-omni-font-loader`,
      options: {
        enableListener: true,
        preconnect: [
          `https://fonts.googleapis.com`,
          `https://fonts.gstatic.com`,
        ],
        web: [
          {
            name: `Inter`,
            file: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
          },
        ],
      },
    },
  ],
};

这是我的 gatsby-browser.js 文件：

import React from "react";
import ThemeContext from "./src/contextWrappers/themeContext";
import ScreenSizeContextWrapper from "./src/contextWrappers/screenSizeContext";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "@popperjs/core/dist/umd/popper.min.js";
import("./src/styles/global.css");

export const wrapRootElement = ({ element }) => (
  <ScreenSizeContextWrapper>
    <ThemeContext>{element}</ThemeContext>
  </ScreenSizeContextWrapper>
);

这是我的404.js文件供参考：

import Navbar from "../newSrc2/components/navbar/navbar";
import Footer from "../newSrc2/components/footer/newFooter";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import StyledButton from "../newSrc2/components/styledButton/styledButton";
import logoLarge from "../newSrc2/assets/logoLarge.png";
import { navigate } from "gatsby";

const fontStyle = {
  fontFamily: "Inter",
  fontWeight: 600,
  color: "#424245",
  textAlign: "center",
};

function PageNotFound() {
  return (
    <>
      <Navbar />
      <Box
        sx={{
          py: { xs: "15vh", lg: "15vh", xl: "20vh" },
          zIndex: -10000000,
        }}
      >
        <Grid
          container
          width={{ xs: "90vw", lg: "80vw", xl: "70vw" }}
          spacing={{ xs: 3, lg: 8 }}
          ml={{ xs: "5vw", lg: "10vw", xl: "15vw" }}
        >
          <Grid item xs={12} lg={6} textAlign="center" my="auto">
            <Typography
              variant="h1"
              sx={{ ...fontStyle, mb: { xs: 3, lg: 2, xl: 4 } }}
            >
              Sorry!
            </Typography>
            <Typography
              variant="h4"
              sx={{
                ...fontStyle,
                m: "0 auto",
                width: "100%",
                maxWidth: "450px",
              }}
            >
              We can’t seem to find the page you’re looking for.
            </Typography>
            <StyledButton
              sx={{
                bgcolor: "black",
                fontFamily: "Inter",
                borderRadius: "30px",
                width: "200px",
                color: "white",
                mt: { xs: 4, lg: 5, xl: 6 },
              }}
              onClick={() => navigate("/")}
              variant="contained"
            >
              take me home
            </StyledButton>
          </Grid>
          <Grid item xs={12} lg={6} my="auto">
            <img src={logoLarge} style={{ maxWidth: "100%" }} />
          </Grid>
        </Grid>
      </Box>
      <Footer />
    </>
  );
}

export default PageNotFound;

我已经搜索过了，但没有任何人建议似乎有效，请帮忙！！

Answer 1

我可以看到一些你可以看的东西：

据我了解，它应该不需要创建您所描述的重定向。 Gatsby 将此设置为默认值。尝试将其删除以查看 /404 是否已经正常工作？

另外，从错误 URL 中删除“.html”，它应该只是“/404”...前提是当您手动输入此 URL 时可以看到 404 页面。

对我有用的是：在 .htaccess 文件中，使用网站完整 URL：

ErrorDocument 404 https://yourwebsiteaddress.com/404