javascript - Gatsby : Display 404 page if route doesn't exist

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 目录下，它将自动为每个不存在的文件进行重定向页。根据their documentation :

To create a 404 page create a page whose path matches the regex ^\/?404\/?$ (/404/, /404, 404/ or 404). Most often you’ll want to create a React component page at src/pages/404.js.

请记住，在 develop 模式下，您的 404，Gatsby 会覆盖默认页面并列出您创建的所有页面和路径。但是，您仍然可以通过单击“预览自定义 404 页面”来预览您的 404 页面，以验证它是否按预期工作。这在您开发时很有用，以便您可以看到所有可用的页面。

在 build 模式下一切正常。