如何与react路由器一起使用普通锚定链接

Question

非常类似于这个角度问题：当使用react路由器时，如何使用锚定链接进行页面内导航？

换句话说，我如何实现以下纯超文本标记语言时使用反应路由器？

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

目前我截取这种链接上的点击，并滚动到锚位置。这并不令人满意，因为这意味着不可能直接链接到页面的某个部分。

Answer 1

从'react router dom'导入{Link}

链接使用

然后在目标React组件（主页）中插入以下代码：

useEffect(() => {
    const hash = props.history.location.hash
    // Check if there is a hash and if an element with that id exists
    const el = hash && document.getElementById(hash.substr(1))
    if (el) {    
        el.scrollIntoView({behavior: "smooth"})
    }
}, [props.history.location.hash]) // Fires every time hash changes

Answer 2

路由器哈希链接对我有用。易于安装和实施：

$ npm install --save react-router-hash-link

在您的组件中。js将其作为链接导入：

import { HashLink as Link } from 'react-router-hash-link';

而不是使用锚

<Link to="#faq-1>Question 1</Link>
<Link to="#faq-2>Question 2</Link>
<Link to="#faq-3>Question 3</Link>

注意：我使用了HashRouter而不是Router

Answer 3

锚点链接的问题是react-router的默认值是使用URL中的哈希来维护状态。幸运的是，您可以根据位置留档将默认行为替换为其他行为。在你的例子中，你可能想要使用历史位置对象尝试“干净的网址”，这意味着react-router不会使用网址哈希。像这样尝试一下：

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});