React Starter Kit新路由异步请求后页面404刷新问题求助

从你的描述和代码来看，这个问题的核心是同构应用（SSR）中服务端与客户端执行环境不一致导致的hydration失败，进而触发路由二次执行并返回404。结合ccxt库的特性，我来拆解原因和解决办法：

为什么用ccxt的fetchBalance会出问题？ #

React Starter Kit是同构架构，路由的action函数会在服务端和客户端各跑一次：

• 服务端这边：能正常执行ccxt的fetchBalance，渲染出标题为"Balances"的页面返回给浏览器
• 客户端hydration阶段：再次执行action时，ccxt在浏览器环境下大概率会报错——要么是交易所API的跨域限制（浏览器不允许直接调用非CORS的第三方API），要么是ccxt依赖了Node.js专属的模块（比如crypto、http），浏览器没有这些原生支持。

一旦客户端的action进入catch分支，而你的catch里没有返回任何有效路由结果，universal router就会判定路由匹配失败，直接渲染404页面。控制台的Text content did not match警告也完全印证了这一点：服务端渲染的内容和客户端最终渲染的内容完全不一致，React会强制重新渲染，最终显示客户端生成的404。

而你用模拟数据时，服务端和客户端的执行逻辑完全一致，不会报错，所以问题就消失了。

具体解决步骤 #

1. 先给catch分支加有效返回 #

首先，你的catch块什么都没返回，这是导致直接跳404的直接原因。先给它加个错误页面返回，这样能看到具体的错误信息：

catch (e) {
  console.log('SOME sort of error', e);
  // 返回错误页面，而不是让router无结果
  return {
    title: "Load Failed",
    component: ( <Layout> <div>Failed to load balances: {e.message}</div> </Layout> ),
  };
}

这一步能帮你明确客户端到底报了什么错（比如跨域、模块缺失）。

2. 解决ccxt的浏览器环境兼容性问题 #

ccxt本质是为Node.js设计的，浏览器环境下有天然的限制，最靠谱的解决方式是通过后端代理请求：

步骤1：新增后端API接口

在项目里加一个API路由（比如/api/balances），专门在服务端执行ccxt的fetchBalance逻辑，然后把数据返回给客户端。这样既避开了跨域，又让ccxt在它熟悉的Node.js环境运行。

步骤2：修改action函数，区分服务端/客户端逻辑

async function action({ fetch }) { 
  let bittrexBalance;
  // 判断当前是服务端还是客户端环境
  if (typeof window !== 'undefined') {
    // 客户端：调用我们自己的后端API
    const res = await fetch('/api/balances');
    bittrexBalance = await res.json();
  } else {
    // 服务端：直接执行ccxt逻辑
    const bittrex = new ccxt.bittrex({ 'apiKey': '', 'secret': '' });
    bittrexBalance = await bittrex.fetchBalance();
  }

  const balances = [bittrexBalance];
  return {
    title: "Balances",
    component: ( <Layout> <Balances balances={balances} /> </Layout> ),
  };
}

3. 保证服务端与客户端数据一致（可选但推荐） #

为了避免客户端重复请求数据，你可以把服务端获取的数据传递给客户端，让客户端直接复用：

• 服务端执行完fetchBalance后，把数据存入全局变量（比如global.__INITIAL_STATE__）
• 客户端在action里直接读取这个全局变量，不用再发请求

这样能进一步保证服务端和客户端渲染的内容完全一致，彻底避免hydration不匹配的问题。

验证建议 #

• 先给catch加返回值，看客户端具体的错误信息
• 打开浏览器的网络面板，检查是否有跨域相关的错误
• 单独在浏览器环境下测试ccxt的fetchBalance，确认是否能正常运行

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