Gatsby：浏览器导航上抛出 404 页面

Question

会抛出

404 页面。我该如何解决这个问题？ 重现步骤

使用

gatsby develop

命令启动 Gatsby 项目。

1. 单击链接从索引页面导航到关于页面。

刷新浏览器关于页面。
单击浏览器的后退导航。
由于未知原因，索引页抛出 404 页面。
5. 动图

为了更清楚起见，您可以参考下面所附的 GIF。

索引页：src/pages/index.js

import React from 'react';
import { Link } from 'gatsby';

const IndexPage = () => {
  return (
    <main>
      <h1>Index Page</h1>
      <Link to="/about">About Me</Link>
    </main>
  );
};

export default IndexPage;

关于页面：

src/pages/about.js

import React from 'react';
import { Link } from 'gatsby';

const AboutPage = () => {
  return (
    <main>
      <h1>About Page</h1>
      <Link to="/">Back To Home</Link>
    </main>
  );
};

export default AboutPage;

包.json

{
  "name": "my-gatsby-site",
  "version": "1.0.0",
  "private": true,
  "description": "My Gatsby Site",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "gatsby": "^3.6.2",
    "gatsby-plugin-gatsby-cloud": "^2.8.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

它仅发生在开发模式下。构建后，它可以正常工作。

Answer 1

但是您可以使用这个“脏”修复：

// gatsby-browser.js

exports.onInitialClientRender = () => {
  // dirty fix for missing popstate listener
  const GATSBY_NAVIGATE = window.___navigate || {}

  window.addEventListener('popstate', () =>
    GATSBY_NAVIGATE(window.location.pathname, { replace: true })
  )
}

来源：

https://github.com/gatsbyjs/gatsby/issues/7261#issuecomment-414304749