如何使用react和redux从不同/其他页面滚动到视图

Question

我对前端开发有些陌生，刚刚在这个领域找到了我的第一份工作。我现在正在一个用React和Redux构建的网站上工作。我遇到的问题出现在一个页面上，该页面包含div的几个部分。导航栏中的按钮使用React onClick事件获取与按钮相关的部分的id，然后"滚动到视图"向下滚动到该部分。这很好，尽管我希望能够访问同一个页面并从不同的页面滚动到视图中。以下是导航栏按钮的示例：

<li>
<FormattedMessage id="section.categories.funny">
{text => (
<button
type="button"
onClick={e => {
e.preventDefault();
if (document.getElementById('funny') !== null) {
document
.getElementById('funny')
.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
}}
>
{text}
</button>
)}
</FormattedMessage>
</li>

例如：假设这个页面位于："url.com/categories"上。当我在这个url上按下写着"有趣"的按钮时，页面会向下滚动到id为"滑稽"的部分，没问题。但我也可以在另一个页面上——比如说："url.com/categories/stores"——有相同的导航栏，当我按下写着"有趣"的按钮时，我想被重定向到"url..com/categories"，然后向下滚动到"有趣"部分。

我希望我的问题有道理，如果没有道理，请告诉我！英语不是我的母语，提出正确问题的艺术似乎在学习如何编码方面发挥了重要作用正如我所说，我对这方面还很陌生，根本没有和React或Redux合作过很多。谢谢/Joel

Answer 1

我遇到了同样的问题，我使用了React Router Hash Link

import { HashLink as Link } from 'react-router-hash-link';
<Link smooth to="/some/path#with-hash-fragment">Link to Hash Fragment</Link>

平滑道具允许元素滚动到。