如何使用带有react和redux的功能从不同/其他页面滚动到视图？

Question

我对前端开发有些陌生，刚刚在这方面找到了我的第一份工作。我正在使用React和Redux构建的网站上工作。我遇到的问题在包含div多个部分的页面上。导航栏中的按钮使用React onClick-event获取与按钮相关的部分的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/stories”-那里有相同的导航栏，当我按下显示为“有趣”的按钮时，我想重定向到“ 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>

平滑支柱允许将元素滚动到。