Javascript 水合时React路由器中带有异步EnterHook的白色页面

我在根react-routerv3路由中使用异步enterhook来验证用户。我已经了解到不建议使用异步enterhooks，但我认为这一建议的原因不是我的问题

如果我不在我的onEnter函数中使用回调函数，我的服务器端呈现DOM和所有工作都很好。一旦我获取了其中的一些内容，我的服务器端呈现的内容就会被扔掉，当oneter的回调得到解决时，我的应用程序组件就会呈现。它似乎忽略了一个事实，即我使用水合物，只是为了重现差异

const onEnter = (next, redirect, callback) => {
  if (auth.notLoggedIn) {
    return callback(); // works fine or I don't notice any flickering
  }

  return auth
    .login()
    .then(callback) // full App rerender
    .catch((error) => {
      console.error(error);

      return callback(); // full App rerender
    });
}

const App = () => <Route onEnter={onEnter}>asdf</Route>;

ReactDOM.hydrate(<App />, myMountPoint);

const-onEnter=（下一步，重定向，回调）=>{
如果（授权不记录）{
return callback（）；//工作正常，或者我没有注意到任何闪烁
}
返回授权
.login（）
.then（回调）//完整应用程序重新加载
.catch（（错误）=>{
控制台错误（error）；
return callback（）；//完整应用程序重新加载程序
});
}
const App=（）=>asdf；
水合物（，myMountPoint）；

有没有办法防止这种行为

---

谢谢

异步enterhook似乎忽略了水合模式。我想出了一个这样的解决办法：

new Promise((resolve) => {
  if (auth.notLoggedIn) {
    return resolve();
  }

  return auth
    .login()
    .then(resolve)
    .catch((error) => {
      console.error(error);

      return resolve();
    });
}).then(() => {
  const App = () => <Route>asdf</Route>;

  ReactDOM.hydrate(<App />, myMountPoint);
});

新承诺（（解决）=>{
如果（授权不记录）{
返回resolve（）；
}
返回授权
.login（）
.然后（解决）
.catch（（错误）=>{
控制台错误（error）；
返回resolve（）；
});
}).然后（（）=>{
const App=（）=>asdf；
水合物（！
不清楚“整页重新加载”是什么意思。是
App
rerender？还是
Route
？还是整个HTML页面重新加载？请提供复制问题的选项。如果您能够模拟SSR响应并将其置于Stackblitz或其他位置，这可能会起作用。嗯，我无法重新创建一个完整的示例，以显示我的问题。H不过，应用程序不会重新加载，它不是一个经典的页面重新加载。我在我的入口点中使用水合物，只有“重新加载”不同之处在于，在React Router中使用EnterHook似乎会触发整个应用程序组件的重新加载。路由器无法控制。我不确定是否有其他方法，但合理的方法是在初始化应用程序之前等待异步依赖项准备就绪，即
doInitialAuth。然后（（）=>ReactDOM.com）（，myMountPoint））
。或者在初始化路由器之前。好的，我想这是唯一明智的方法。谢谢！它是这样工作的，我真的很感谢！）