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目录下，它将自动为每个不存在的页面进行重定向。根据他们的文档：

\n

\n

要创建 404 页面，请创建一个路径与 regex\n 匹配的页面^\\/?404\\/?$ (/404/, /404, 404/ or 404)。大多数情况下，您\xe2\x80\x99会想要\n在 处创建一个 React 组件页面src/pages/404.js。

\n

\n

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

\n

在模式下build一切都按预期进行。

\n