React SPA应用404页面返回200状态码的修复方法咨询

核心原因 #

React SPA默认采用客户端路由，服务器会对所有请求URL返回index.html（状态码200）——哪怕客户端渲染了404页面，服务器的响应状态码仍为200，这才是影响SEO的根本问题。解决关键是让服务器在匹配不到有效路由时，返回带404状态码的响应，同时渲染自定义404组件。

不同部署场景的解决方案 #

1. 静态托管平台（Netlify、Vercel、GitHub Pages、Nginx） #

这类平台托管静态文件，需配置服务器路由规则：

• Netlify：在项目根目录创建_redirects文件，添加规则：

  /* /404.html 404
  

  确保打包输出目录中存在404.html（可单独创建该页面，或通过路由配置让打包工具生成）。

• Vercel：在项目根目录创建vercel.json，配置重写规则：

  {
    "rewrites": [
      { "source": "/(.*)", "destination": "/index.html" },
      { "source": "/404", "destination": "/404.html", "statusCode": 404 }
    ]
  }
  

  或直接上传404.html文件，Vercel会自动对不存在的URL返回404状态码。

• GitHub Pages：在项目根目录创建404.html文件，GitHub Pages会自动对不存在的URL返回404状态码。若使用BrowserRouter，需注意配置项目路径或自定义域名；若用HashRouter，需额外处理客户端路由匹配。

• Nginx：修改Nginx配置文件的server块：

  location / {
    try_files $uri $uri/ /index.html;
  }
  error_page 404 /404.html;
  location = /404.html {
    root /path/to/your/build;
    internal;
  }
  

  确保build目录下存在404.html。

2. 服务端渲染（SSR）框架（Next.js、Remix等） #

SSR框架支持在服务器端处理路由，可直接返回正确状态码：

• Next.js：

  • App Router：在路由组件中添加export const notFound = true，或调用notFound()函数：

    import { notFound } from 'next/navigation';
    
    export default function NotFoundPage() {
      notFound();
      return <div>404 - 页面不存在</div>;
    }
    

  • Pages Router：在getServerSideProps中返回{ notFound: true }：

    export async function getServerSideProps() {
      return { notFound: true };
    }
    
    export default function NotFoundPage() {
      return <div>404 - 页面不存在</div>;
    }
    

• Remix：在路由的loader函数中抛出404响应：

  export async function loader() {
    throw new Response(null, {
      status: 404,
      statusText: 'Not Found',
    });
  }
  
  export default function NotFoundPage() {
    return <div>404 - 页面不存在</div>;
  }
  

• 自定义Node.js SSR服务器：路由匹配失败时，返回404状态码并渲染React 404组件：

  app.get('*', (req, res) => {
    if (!isValidRoute(req.path)) {
      const html = ReactDOMServer.renderToString(<NotFound />);
      res.status(404).send(`
        <!DOCTYPE html>
        <html>
          <head><title>404 Not Found</title></head>
          <body>${html}</body>
        </html>
      `);
      return;
    }
    const html = ReactDOMServer.renderToString(<App />);
    res.send(html);
  });
  

3. 静态生成（SSG）场景 #

以Next.js静态导出为例：框架会自动生成404.html，只需在托管平台配置服务器对不存在的URL返回该文件并设置404状态码，具体配置参考对应平台文档。

客户端补充配置 #

在React Router中仍需配置客户端路由的404 fallback，但这仅用于客户端路由匹配失败时的渲染，核心还是服务器端返回404状态码：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 其他业务路由 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

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