时间戳

首页 > 解决方案 > 加载主页以外的反应页面将导致 404

javascript - 加载主页以外的反应页面将导致 404

问题描述

我对反应还很陌生，并且对它的工作原理有基本的了解。使用该react-router-dom软件包，我设置了一个主页，其中包含 3 个指向/about、/post和/account. 访问主页并单击每个链接时，所有工作都按预期工作。

我遇到的问题是尝试通过直接转到页面 url 来加载页面。例如，键入www.xxx.com/about将加载 404 页面。正如我上面提到的，加载主页并单击 about 链接可以正常工作，但尝试 about 页面的 url 路径将不起作用。为什么会发生这种情况，有没有办法解决这个问题？

标签： javascriptreactjsreact-router

解决方案

当你浏览 React Router 时，会发生两件事：

  1. React 应用程序使用您指定的路由的内容更新 DOM
  2. 浏览器历史记录使用 URL 更新，理论上，该 URL 指向该路由

这个想法是，当你从头开始一个页面时，你必须从服务器加载 React 应用程序，但是当你从一个页面导航到另一个页面时，它都是在客户端处理的（可能除了 API 调用来获取数据）。

您的问题是您没有做任何事情来使服务器支持该路由，因此当浏览器加载的第一页（包括刷新或在新窗口中打开链接）不是主页时，您会遇到 404 错误。

有一些基本的方法可以做到这一点。

快速而肮脏的方法

配置您的服务器，以便任何应由 React 路由器处理的路由请求都提供引导您的 HTML 文档的 HTML 文档。

目前，您只有（可能）/提供该文档的路径。

这有几个缺点：

  • 应该是 404 错误的 URL 可能会指向您的 React 应用程序的 HTML 文档，并最终成为 200 个 OK 页面。
  • 它对搜索引擎不太友好
  • 如果 JS 因任何原因失败（例如在加载页面中途网络丢失，或公司防火墙将 JS 误认为是潜在有害的东西），则不会回退到有用的内容。

虽然我不推荐这种方法，但这里有一个关于如何配置 Apache HTTPD 来执行此操作的问题。其他 HTTP 服务器将需要特定于它们的配置。

稍微不那么脏的方法

您可以通过更改 URL 中的片段标识符而不是path来避免路由的 URL 指向服务器上的不同路径。

这是通过使用<HashRouter>代替来完成的<BrowserRouter>。

Hashbangs 是 SPA 在pushState浏览器和朋友介绍之前使用的方法。

这样可以避免破坏 404 错误。

在构建时为每个路由生成特定的 HTML 文档

您生成为每条路线量身定制的 React 引导文档版本。

这是Gatsby使用的方法，它非常容易。

按需为每条路线生成特定的 HTML 文档

这做同样的事情，但不是创建一个静态 HTML 文档的大文件，当您进行更新时，所有这些文件都必须被替换，您使用相当传统的服务器端方法生成文档。

Next.js采用了这种方法，并且再次使它变得非常简单。不过，与简单的静态文件相比，您需要更多的专业托管。

推荐阅读