Javascript 如何在 react-router 中使用普通锚链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28893855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use normal anchor links with react-router
提问by starwed
Very similar to this angular question: how do I use anchor links for in-page navigation when using react-router?
与这个角度问题非常相似：使用 react-router 时如何使用锚链接进行页内导航？
In other words, how do I implement the following plain HTML when using react-router?
换句话说，在使用 react-router 时如何实现以下纯 HTML？
<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>
Currently I intercept clicks on such links, and scroll to the anchor position. This isn't satisfactory, because it means it's impossible to link directly to some section of a page.
目前我拦截对此类链接的点击，并滚动到锚点位置。这并不令人满意，因为这意味着无法直接链接到页面的某些部分。
回答by Colin Ramsay
The problem with anchor links is that react-router's default is to use the hash in the URL to maintain state. Fortunately, you can swap out the default behaviour for something else, as per the Location documentation. In your case you'd probably want to try out "clean URLs" using the HistoryLocation object, which means react-router won't use the URL hash. Try it out like this:
锚链接的问题在于，react-router 的默认设置是使用 URL 中的哈希值来维护状态。幸运的是，您可以根据Location 文档将默认行为替换为其他内容。在您的情况下，您可能想使用 HistoryLocation 对象尝试“干净的 URL”，这意味着 react-router 不会使用 URL 哈希。像这样尝试：
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
回答by maledr53
React Router Hash Linkworked for me. Easy to install and implement:
React Router Hash Link对我有用。易于安装和实施：
$ npm install --save react-router-hash-link
In your component.js import it as Link:
在您的 component.js 中将其作为链接导入：
import { HashLink as Link } from 'react-router-hash-link';
And instead of using an anchor <a>, use <Link> :
而不是使用锚点<a>，使用<Link> ：
<Link to="#faq-1>Question 1</Link>
<Link to="#faq-2>Question 2</Link>
<Link to="#faq-3>Question 3</Link>
NOTE: I used HashRouterinstead of Router
注意：我用HashRouter而不是Router
回答by Noah
import { Link } from 'react-router-dom'
import { Link } from 'react-router-dom'
Link using
链接使用
<Link to='/homepage#faq-1'>Question 1</Link>
<Link to='/homepage#faq-1'>Question 1</Link>
Then insert the following code inside your target React component (Homepage):
然后在目标 React 组件（主页）中插入以下代码：
useEffect(() => {
const hash = props.history.location.hash
if (hash && document.getElementById(hash.substr(1))) {
// Check if there is a hash and if an element with that id exists
document.getElementById(hash.substr(1)).scrollIntoView({behavior: "smooth"})
}
}, [props.history.location.hash]) // Fires every time hash changes
