React Router v6如何为未匹配路由返回404状态码？

你当前的React Router前端路由配置如下：

<Routes>
    {/* Public routes */}
    <Route exact path="/" element={<Home />} />

    // Rest of my routes...

    {/* Error routes */}
    <Route path="*" element={<PageNotFound />} />
</Routes>

这种配置能在前端渲染404页面，但所有请求的响应状态码都是200，确实违反了SEO最佳实践——Google会认为这是有效页面，不会将其标记为404，影响站点的索引逻辑。

能否通过React Router前端修改响应状态码？ #

不行。HTTP响应状态码是由服务器在处理请求时生成并返回的，React运行在浏览器端，属于客户端代码，无法修改服务器已经发送的响应头和状态码。前端路由的path="*"只是在客户端路由层面做了匹配，此时服务器已经返回了200状态码，前端只是替换了页面内容而已。

后端处理的要求 #

必须通过后端配置来解决这个问题，你需要向后端开发人员提出以下要求：

• 配置服务器对所有请求进行路由匹配：如果请求的路径匹配后端API或静态资源，正常返回对应内容；如果未匹配到任何有效路由，返回404状态码，同时返回React打包后的index.html（保证前端能渲染404页面）。
• 对于用户直接访问的不存在路由（比如/invalid-page），服务器必须返回404状态码，不能默认返回200。
• 如果你的应用使用服务端渲染（SSR），在服务端进行路由匹配时，一旦检测到未匹配的路由，立即设置响应状态码为404，再渲染404组件返回给客户端。
• 针对动态路由（比如/article/:id），如果请求的资源ID不存在（比如文章不存在），后端需要返回404状态码，而不是让前端单纯渲染404页面但保持200状态。

内容的提问来源于stack exchange，提问作者aklassen