Netlify在页面刷新时呈现404 (使用React和react-router)

基础概念

Netlify 是一个静态网站托管平台，它非常适合用于托管使用 React 和其他前端框架构建的单页应用程序（SPA）。React Router 是 React 的路由库，用于在 SPA 中管理不同页面的导航。

问题描述

在使用 React 和 React Router 构建的项目中，当用户刷新页面时，可能会遇到 404 错误。这是因为 Netlify 默认情况下不知道如何处理前端路由，导致无法找到对应的资源。

原因分析

1. 前端路由与服务器路由的区别：在 SPA 中，所有的路由都是由前端 JavaScript 处理的，而不是由服务器处理。当用户刷新页面时，浏览器会向服务器请求对应的资源，而服务器并不知道这个资源是由前端路由处理的，因此返回 404 错误。
2. Netlify 的默认行为：Netlify 默认情况下会将所有请求都指向 index.html 文件，但如果没有正确配置，服务器可能无法正确处理前端路由。

解决方案

方法一：使用 _redirects 文件

在项目的根目录下创建一个 _redirects 文件，并添加以下内容：

/*    /index.html   200

这个配置告诉 Netlify，对于所有的请求，都返回 index.html 文件，并返回 200 状态码。这样，当用户刷新页面时，Netlify 会返回 index.html，然后由 React Router 处理路由。

方法二：使用 Netlify 的 _headers 文件

在项目的根目录下创建一个 _headers 文件，并添加以下内容：

/*    X-Frame-Options: DENY

这个配置可以防止点击劫持，但并不能直接解决 404 问题。通常情况下，结合 _redirects 文件使用效果更好。

方法三：使用 Netlify 的函数

Netlify 支持使用函数来处理复杂的路由逻辑。你可以创建一个函数来处理前端路由，并将其部署到 Netlify。

1. 在项目根目录下创建一个 functions 文件夹。
2. 在 functions 文件夹中创建一个 404.js 文件，并添加以下内容：

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Page not found, redirecting...' }),
  };
};

1. 部署项目到 Netlify。

这样，当用户刷新页面时，Netlify 会调用这个函数，并返回 index.html 文件，由 React Router 处理路由。

应用场景

这种方法适用于所有使用 React 和 React Router 构建的单页应用程序，特别是在需要处理前端路由的情况下。

参考链接

• Netlify Redirects
• Netlify Functions

通过以上方法，你可以有效地解决 Netlify 在页面刷新时呈现 404 的问题。