React Todo应用本地正常，Vercel部署后主页面报错求助

核心问题1：服务端环境下调用localStorage报错 #

你的代码在useState初始化时直接调用localStorage.getItem，但Vercel部署时会对页面进行预渲染（服务端执行组件代码），而服务端环境没有浏览器的localStorage API，这会直接抛出错误，导致根页面加载失败；而通过客户端导航进入/addtodo时，代码仅在浏览器执行，所以不会触发该错误。

修复localStorage相关代码，增加浏览器环境判断与错误处理：

const [todos, setTodos] = useState(() => {
  // 先确认处于浏览器环境
  if (typeof window === 'undefined') return [];
  const localValue = localStorage.getItem('MYTODOS');
  // localStorage不存在对应key时返回null，而非undefined
  if (!localValue) return [];
  // 增加JSON解析错误捕获，避免数据格式异常导致崩溃
  try {
    return JSON.parse(localValue);
  } catch (err) {
    return [];
  }
});

useEffect(() => {
  // 同样限制仅在浏览器环境执行localStorage操作
  if (typeof window !== 'undefined') {
    localStorage.setItem('MYTODOS', JSON.stringify(todos));
  }
}, [todos]);

核心问题2：Vercel未配置客户端路由重写 #

即使修复了localStorage问题，直接刷新非根路径或首次访问子路由时，Vercel会尝试寻找对应路径的静态文件，而React Router的客户端路由需要所有请求都指向index.html，由前端路由系统处理。

在项目根目录创建vercel.json文件，添加重写规则：

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

验证步骤 #

1. 将上述修改提交到GitHub仓库
2. 重新触发Vercel的部署流程
3. 访问根路径与子路由，确认页面正常加载

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