如何在 react-router 中使用普通的锚链接

Posted 2023-02-21

【中文标题】如何在 react-router 中使用普通的锚链接

【英文标题】：How to use normal anchor links with react-router

【发布时间】：2015-05-07 18:24:28

【问题描述】：

非常类似于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>

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

【问题讨论】：

有人将此问题编辑为一个完全不同的问题。这是关于anchor links。

我也很想知道这个问题的答案。他们说他们“不支持这个”，当产品是路由器时，这似乎很荒谬。

@Mike - 我很想听听您对我的回答的评论，因为我相信如果您尝试一下应该可以解决问题？

你的答案可能在这个帖子里：https://github.com/rackt/react-router/issues/770

我遇到了同样的问题，并通过拦截锚点的 onClick 并使用 scrollTo 解决方案代替锚点标签的默认浏览器行为来解决它。我同意@Mike 的观点，这是相当荒谬的。

【参考方案1】：

锚链接的问题是 react-router 的默认是使用 URL 中的 hash 来维护状态。幸运的是，您可以根据Location documentation 将默认行为换成其他东西。在您的情况下，您可能希望使用 HistoryLocation 对象尝试“干净的 URL”，这意味着 react-router 不会使用 URL 哈希。试试这样：

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

【讨论】：

这是我的路由器最初设置的方式（使用 Router.HistoryLocation），但它不会自动拦截 链接JSX 文件或使用 dangerouslySetInnerHTML 插入的内容。他们在他们的 Github 问题页面上说他们不支持它并且不建议绑定事件来处理它，例如 $('a').click(func) 这让我有疑问一个人应该怎么做。

现在我想我的需求和发帖人最初的问题不同。

我现在明白你的意思了。我实际上从未有过这个要求，所以我只是假设它可以工作，但根据你所说的，这听起来需要额外的解决方法，但 HistoryLocation 方法将提供一个起点。

React-Router 有一个关于使用 HistoryLocation 启用哈希链接的已关闭错误：github.com/rackt/react-router/issues/394。关闭后其他人发布它仍然是一个问题，我认为这是真的。

抱歉，从答案或 cmets 中不清楚 - 此答案是否会使 <a> 标记正确导航到具有匹配 ID 的部分？

【参考方案2】：

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

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

在您的 component.js 中将其作为链接导入：

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>

注意：我使用 @987654322@ 而不是 @987654323@

【参考方案3】：

import Link from 'react-router-dom'

链接使用

<Link to='/homepage#faq-1'>Question 1</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

【参考方案4】：

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

<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' 可以作为项目中的变量提供