Question

与this angular question非常相似：在使用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>

目前我拦截了对此类链接的点击，并滚动到锚点位置。这并不令人满意，因为这意味着无法直接链接到页面的某个部分。

Answer 1

锚链接的问题是react-router的默认设置是使用URL中的哈希来维护状态。幸运的是，根据Location documentation，您可以替换其他内容的默认行为。在您的情况下，您可能想要尝试清理网址＆＃34;使用HistoryLocation对象，这意味着react-router不会使用URL哈希。试试这样：

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

Answer 2

React Router Hash Link为我工作。易于安装和实施：

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

在你的component.js中将其导入为Link：

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

而不是使用锚<a>，而是使用<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

使用当前方法，您将使用 Link 中的 react-router-dom

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

将完成

import React from 'react';
import {Link} from 'react-router-dom';

和使用

<Link to={{pathname: '/this-view-path', hash: '#faq-1'}}>Question 1</Link>

当然可以将“/this-view-path”作为项目中的变量提供

Answer 4

import { Link } from 'react-router-dom'

使用

链接

<Link to='/homepage#faq-1'>Question 1</Link>

然后在目标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

如何使用反应路由器的普通锚链接

4 个答案: