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

IT技术 javascript anchor reactjs react-router
2021-04-13 09:08:10

与这个角度问题非常相似：使用 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>

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

4个回答

锚链接的问题在于 react-router 的默认设置是使用 URL 中的哈希值来维护状态。幸运的是，您可以根据位置文档将默认行为替换为其他内容。在您的情况下，您可能想使用 HistoryLocation 对象尝试“干净的 URL”，这意味着 react-router 不会使用 URL 哈希。像这样尝试：

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});
我认为我的需求与海报最初的问题不同，现在我考虑了一下。
2021-05-25 09:08:10
React-Router 有一个关于使用 HistoryLocation 启用哈希链接的封闭错误：github.com/rackt/react-router/issues/394。关闭后其他人发布它仍然是一个问题，我发现这是真的。
2021-05-26 09:08:10
抱歉，答案或评论并不清楚 - 此答案是否会使<a>标签正确导航到具有匹配 ID 的部分？
2021-05-26 09:08:10
这就是我的路由器最初的设置方式（使用Router.HistoryLocation），但它不会自动拦截JSX 文件中的<a>链接或使用危险的SetInnerHTML插入的内容。他们已经在他们的 Github 问题页面上说他们不支持它并且不建议绑定事件来处理它，例如$('a').click(func)这让我怀疑一个人应该怎么做它。
2021-05-28 09:08:10
不过我现在明白你的意思了。我从来没有真正有过这个要求，所以我只是假设它可以工作，但根据你所说的，听起来需要额外的解决方法，但 HistoryLocation 方法将提供一个起点。
2021-06-05 09:08:10

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>

注意：我用HashRouter而不是Router

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

使用你可以使用目前的方法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' 可以作为项目中的变量提供

其它你可能感兴趣的问题
上一篇在卸载 React 时删除事件侦听器 下一篇我可以在 React 的 componentWillMount 中调用 API 吗？