重新加载页面时使用 GITHUB 时出现错误 404

Question

我正在用 React 制作一个电子商务网站，我将网站上传到 Github 页面，部署工作正常，但是当我单击导航按钮转到网页的不同部分并重新加载页面，出现错误404：

Failed to load resource: the server responded with a status of 404 ()

在本地主机中，它完全可以正常工作。我是否需要再次将我的网站部署为一个新项目？我一直以同样的方式上传网站，我没有遇到这个问题。我实现了我的 google 浏览器，会不会有兼容性问题？非常感谢！

Answer 1

在您的 package.json 中添加一个具有值

的字段名称

"homepage":"."

在 public 以及您的构建文件夹中创建一个文件 _redirects 在其中写入此代码

/* /index.html 200

Answer 2

注意： 我假设您使用的是 create-react-app 和 JSX，并且 react-router-dom 是这样的：

<BrowserRouter>
  <Routes>
    <Route exact path="/" element={<HomePage />} />
    <Route path="cart" element={<CartPage />} />
    <Route path="settings" element={<SettingsPage />} />
  </Routes>
</BrowserRouter>

好吧，GitHub 页面中的 HTTP 路由与在本地计算机中使用 npm start 命令的工作方式不同。幸运的是，create-react-app have already explained the technical reasons behind this:

背后的开发者

If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.

This is because when there is a fresh page load for a /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html.

是的，GitHub Pages 也算作静态文件服务器， 并期望这些路由可作为单独的静态文件使用（例如 build/cart.html对于 /cart 路由），这里的目标是欺骗 GitHub 页面服务于 index.html 而不是所有这些路由。但是，目前无法在 GitHub 页面端修复此问题，例如通过应用 .htaccess 配置文件（因为 GitHub Pages 不使用 Apache Web 服务器）或转到 GitHub.

上的存储库设置

那么，这里可以做什么？上面的代码片段使用 <BrowserRouter>，已知它与 GitHub 页面托管不兼容。好消息，许多人建议 将 <BrowserRouter> 替换为 <HashRouter>，，这实际上应该适用于所有静态文件服务器（参见技术原因 ). There's a dedicated FreeCodeCamp article如何为您的 React 项目设置 <HashRouter> 并将其发布到 GitHub 页面。

注意： 将其替换为 <HashRouter> 后，您需要处理 HTML/JSX 标签中现有的硬编码路径，如 [=28] =] 使用古老的 HTML anchor/ID 标签（例如 #menu）。这意味着你的 React 应用程序中的 <a href="/cart"> 必须替换为 <a href="#/cart"> （注意那里的附加散列/# 字符）否则它会再次 return 一个 404.

重新加载页面时使用 GITHUB 时出现错误 404

Error 404 when using GITHUB when I reload the page

javascript

github-pages

react-native