GatsbyJS:如果路由不存在，则显示404页

Question

如何正确设置404页，以便如果用户碰到任何不存在的路由，则重定向到此404页？

目前我有这样的代码：

import React from "react";
import Layout from "../components/layout";
import SEO from "../components/seo";

    const NotFoundPage = () => (
        <Layout>
            <SEO title="404: Not found" />
            <h1>NOT FOUND</h1>
            <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
        </Layout>
    );
    
    export default NotFoundPage;

Answer 1

如果文件名为404.js，并将其放置在src/pages/404.js目录下，它将自动对每个不存在的页面进行重定向。根据他们的文件

若要创建404页，请创建路径与regex ^\/?404\/?$ (/404/, /404, 404/ or 404)匹配的页。通常，您会希望在src/pages/404.js上创建一个React页面。

请记住，在develop模式下(您的404 )，Gatsby将重写默认页面，并列出您创建的所有页面和路径。但是，您仍然可以通过单击“预览自定义404页”来预览404页面，以验证它是否正常工作。这在开发时非常有用，这样您就可以看到所有可用的页面。

在build模式下，一切都按预期工作。