我在 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;
我已经搜索过了,但没有任何人建议似乎有效,请帮忙!!
我可以看到一些你可以看的东西:
据我了解,它应该不需要创建您所描述的重定向。 Gatsby 将此设置为默认值。尝试将其删除以查看 /404 是否已经正常工作?
另外,从错误 URL 中删除“.html”,它应该只是“/404”...前提是当您手动输入此 URL 时可以看到 404 页面。
对我有用的是:在 .htaccess 文件中,使用网站完整 URL:
ErrorDocument 404 https://yourwebsiteaddress.com/404