在react项目中添加了react-snap，未链接的页面和404没有加载正确的内容

Question

最近在react站点上移动到react-snap(所以如果有人分享我的工作链接，我可以过上元标签预览的生活)

一个奇怪的问题，我有我的非链接页面，特别是我的404页面正在加载一些内容从我的主页，并没有更新到正确的id标签，英雄图像或正确的CSS样式的页面。

我有一个链接页面(类似于你在社交网站上看到的链接树页面)，以前被破坏了，当我将页面添加到网站导航中时，它现在呈现正确。

关于如何让404页面正确加载的任何想法?我需要一个sudo 404页面，爬，如果有人加载实际的404页面从一个破碎的链接，它将正确呈现?

该组件位于Switch组的底部，如下:Route component={Page404}

正确的页面渲染:https://dangerhuskie.com/works/varsity-pumpkinhead

查看破损的404:https://dangerhuskie.com/farts

如果你从404转到另一个页面，然后浏览器返回按钮回到它，它会正确呈现。

Answer 1

遇到类似的问题，在这里找不到答案，认为它与react-snap有关。这实际上是我如何使用react。水合物的问题。如果其他人在这方面有问题，这篇文章是一个很好的阅读，并提供了一个很好的解决方案https://www.joshwcomeau.com/react/the-perils-of-rehydration/

长话短说，添加

const [hasMounted, setHasMounted] = React.useState(false);
React.useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}

组件中的应该有帮助。