38

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

4 回答 4

18

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

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});
于 2015-04-05T11:03:29.330 回答
13

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

于 2017-08-19T23:43:39.917 回答
6

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
于 2019-12-01T17:41:11.527 回答
4

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

于 2021-03-29T20:15:14.727 回答