Reactjs导航平滑滚动和路由

Question

有人可以帮助我，我设计了一个自定义导航条，当你点击一个链接，它会平滑滚动到该组件。问题是，当我在另一条路线(示例:/shop)，我点击导航栏链接，它会显示一个错误的"getBoundingClientReact null"。我知道useEffect在html内容更改之前运行，但我还没有找到任何解决方案。

你可以在这里检查代码，以更好地理解问题。

https://codesandbox.io/s/smooth滚动- 80 npq

Answer 1

你得到这个错误，因为错误说targetSection是null，因此不能在它上面调用任何方法，targetSection是null，因为在component/ViewPort.js, LINE 33const targetSection = document.querySelector("#" + targetId);中，你将null分配给targetSection，因为没有任何元素的id等于targetId。

这是正确的，因为当你在路径/shop上时，React呈现你的ShopScreen组件，该组件不包含任何具有HomeScreen上id的元素。您需要在重定向到/之后调用SmoothScroll，而不是在此之前。

编辑:作为方便的解决方案，我建议用react-router-hash-linkhttps://github.com/rafgraph/react-router-hash-link与cssscroll-behavior: smooth属性相结合的<HashLink>组件替换<Link>。这样你就不需要调用SmoothScroll了，代码会更直接。

Answer 2

以防有人像我一样搜索同样的问题。如果用户在另一个页面上，我通过添加setTimeOut来修复它。

请随意查看此链接。我还修改了它，使它具有更少的代码。

https://codesandbox.io/s/smooth滚动- 80 npq