返回

React Browser 路由模式下的 Nginx 服务器配置，避免 404 错误

前端

导言

在 React 单页应用（SPA）中，Browser Router 模式使用历史记录 API 来管理路由，它无需在服务器端进行刷新即可更改 URL。然而，当使用 Nginx 服务器部署 React 应用时，可能会遇到 404 Not Found 错误。本文将深入探讨 Nginx 服务器配置的最佳实践，以解决此问题，确保 React 应用在 Browser Router 模式下的平稳运行。

Nginx 配置

要配置 Nginx 服务器以处理 React Browser Router 模式，你需要编辑服务器配置文件（通常位于 /etc/nginx/sites-available 中）。以下是配置步骤：

  1. 启用 Location 块： 在配置文件中添加一个新的 location 块，如下所示：
location / {
    try_files $uri $uri/ /index.html;
}
  1. 配置根目录： 将 root 指令设置为指向 React 应用构建后的根目录。例如：
root /path/to/react-app/build;
  1. 设置 index 文件： 添加 index 指令，指定默认的 index 文件。在 React 应用中，通常是 index.html。
index index.html;
  1. 添加 try_files 指令： try_files 指令告诉 Nginx 尝试搜索请求的 URI。如果没有找到该 URI，它将尝试搜索 URI 后接一个斜杠，最后再尝试 index.html。

理解 try_files 指令

try_files 指令用于指定 Nginx 在响应客户端请求时尝试查找文件或目录的顺序。在上面的示例中，它将按以下顺序查找文件：

  1. 直接查找请求的 URI
  2. 查找请求的 URI 后接一个斜杠（/）
  3. 查找 index.html 文件

避免 404 错误

通过上述配置，Nginx 将在请求的 URI 不存在时尝试加载 index.html。这将有效解决 404 Not Found 错误，因为 index.html 文件总是存在于 React 应用的构建目录中。

结论

通过遵循这些配置步骤，你可以轻松配置 Nginx 服务器以处理 React 应用的 Browser Router 模式。通过将 root 指令指向 React 应用的构建目录并使用 try_files 指令，你可以避免 404 错误，确保 React 应用在 Nginx 服务器上平稳运行。