React认证路由预渲染异常求助（S3静态站点场景）

我之前折腾过把React应用部署到S3静态站点的场景，也碰到过react-snap处理受保护路由时的重定向问题，结合react-router的使用，给你几个亲测有效的解决方案：

方案一：给react-snap添加预渲染认证模拟 #

react-snap默认是以未登录状态爬取路由的，所以访问受保护的/dashboard会被重定向到/login。我们可以通过自定义脚本模拟登录状态，让react-snap能正确渲染目标路由：

1. 项目根目录创建pre-render.js脚本，模拟你的认证逻辑（比如设置localStorage的token）：

// 根据你的实际认证方式调整，比如设置token到localStorage
window.localStorage.setItem('auth_token', 'mock_valid_token');

2. 在package.json的reactSnap配置中引入这个脚本：

"reactSnap": {
  "script": "./pre-render.js",
  "routes": ["/", "/dashboard", "/login"]
}

3. 在你的路由保护组件中，区分预渲染环境：

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = checkAuthStatus(); // 你的认证检查函数
  // 判断是否是react-snap的预渲染环境
  const isPrerendering = typeof window !== 'undefined' && window.prerenderReady;

  // 预渲染时不做重定向，返回占位内容（比如骨架屏）
  if (!isAuthenticated && !isPrerendering) {
    return <Navigate to="/login" />;
  }

  return isPrerendering ? <DashboardSkeleton /> : children;
};

这样react-snap预渲染/dashboard时，会渲染骨架屏而非登录页，S3返回200状态码；用户实际访问时，客户端会自动检查认证状态，再决定是否跳转。

方案二：改用更灵活的预渲染工具——prerender-spa-plugin #

如果react-snap的定制化满足不了需求，可以试试prerender-spa-plugin（Webpack插件），它支持针对单个路由设置预渲染逻辑：

1. 安装依赖：

npm install prerender-spa-plugin --save-dev

2. 在webpack.config.js中配置插件（如果用CRA，需要先 eject 或者用 react-app-rewired）：

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'build'),
      // 需要预渲染的路由列表
      routes: ['/', '/dashboard', '/login'],
      renderer: new Renderer({
        headless: true,
        // 等待应用触发自定义事件后再渲染
        renderAfterDocumentEvent: 'render-ready',
        // 针对/dashboard路由模拟登录
        beforeRender: async (page, route) => {
          if (route === '/dashboard') {
            await page.evaluate(() => {
              localStorage.setItem('auth_token', 'mock_valid_token');
            });
          }
        }
      })
    })
  ]
};

3. 在React应用的入口文件中，触发自定义事件通知插件可以开始渲染：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// 触发事件，告诉prerender-spa-plugin应用已准备好
document.dispatchEvent(new Event('render-ready'));

这个方案能精准控制每个路由的预渲染状态，适合复杂的认证路由场景。

方案三：仅解决S3 404的轻量方案（无需完全预渲染内容） #

如果你不需要预渲染/dashboard的实际内容，只是想避免S3返回404，可以在路由保护组件中针对预渲染环境返回空的基础结构：

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = checkAuthStatus();
  const isPrerendering = typeof window !== 'undefined' && window.prerenderReady;

  if (!isAuthenticated && !isPrerendering) {
    return <Navigate to="/login" />;
  }

  // 预渲染时仅返回一个空的容器，保证路由能被S3识别
  return isPrerendering ? <div id="root" /> : children;
};

这样react-snap会为/dashboard生成一个包含空容器的HTML文件，S3返回200状态码，用户访问时客户端路由接管后再处理认证跳转。

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