小编Ste*_*e K的帖子

我想知道是否有一种好方法可以防止反应中的后备闪烁。我正在使用反应路由器，问题是当一个组件被挂起时，回退加载器会非常快地闪烁，这很烦人。我在这里看到了答案React suspense/lazy delay? 如下所示：

const Home = lazy(() => {
  return Promise.all([
    import('./components/Home'),
    new Promise(resolve => setTimeout(resolve, 500))
  ]).then(([moduleExports]) => moduleExports);
});

但我的问题是我有一个带有透明背景的覆盖加载微调器，并且组件在承诺得到解决之前实际上不会加载。这会使页面在没有内容的情况下挂起半秒，实际上比微调器的闪烁更烦人。

所以我想问题是有没有人找到处理这个问题的好方法。我真的很想在页面中添加类似 nprogress 的东西，但不知道如何使用 React.suspense 来实现它。我可能只需要回去使用 react loadable 但我真的不想当 react 具有基本相同的开箱即用功能时。

我正在尝试使用 nextjs 实现自定义滚动。我希望能够在用户离开时保存页面的滚动位置，以便当他们使用 popstate 返回时我可以重置滚动位置。

问题是，当我尝试使用replaceState历史 api 时，next/router 会覆盖我用它们自己的数据放置的内容。Next/router 不为其路由器提供任何类型的历史记录，并且他们不放置 id 或任何我可以引用以使用我自己的状态的内容。所以我无法引用我实际所在的历史堆栈的哪一页。Next/router api 文档位于此处Nextjs Router API。

这是我正在尝试做的事情的一个简单示例：

const setHistory = () => {
    const { state } = window.history;
    const newState = {
        ...state,
        scroll: 'my custom scroll value'
    };
    history.replaceState(newState, '', state.url);
}

const handleRouteChangeStart = (url) => {
    setHistory();
}

const handlePopstate = () => {
    console.log(window.history)
}

window.addEventListener('popstate', handlePopstate);
Router.events.on('routeChangeStart', handleRouteChangeStart);

我还尝试将值设置为 nextjs 设置的选项键，但结果与此不一致，这也意味着有时未设置该值，感觉有点 hacky。

NextJs 真的不允许您与浏览器历史记录进行任何类型的交互或操作 window.history 对象吗？