前言
在前端开发中，对于单页应用（Single Page Application，SPA）和多页应用（Multiple Page Application，MPA）的页面内跳转需求，我们通常采用 react-router 路由解决。但是，在一些特定场景下，我们需要锚点定位的方式实现页面内的跳转，这时 react-router 路由并不会为我们提供很好的支持。这时，我们可以使用 @pharrellwang/react-router-hash-link 这个 npm 包来方便地实现锚点定位跳转。
安装
安装命令如下：
npm install @pharrellwang/react-router-hash-link # 或者 yarn add @pharrellwang/react-router-hash-link
使用方法
在应用中引入该 npm 包，并使用其中的 HashLink 组件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ---------------------------------------
------ ------- -------- ----- -
------ -
-----
--------- ---------------------------------------------------------
------
--
-其中，to 属性的值为目标页面的路由地址加上要跳转至的锚点，如 /some-page#some-hash-on-that-page。
原理
这个 npm 包的核心原理还是基于 react-router 的，只不过它做了一些封装，让我们可以通过组件的方式使用 react-router，并且可以很轻松地添加 hash。
该 npm 包解决的问题就是在 SPA 中跳转到其他页面内的锚点。
高级用法
@pharrellwang/react-router-hash-link 提供了 HashLink 组件，该组件暴露出多个 props，根据实际需求进行使用。
1. smooth 属性
此属性启用平滑滚动效果。可以通过将此属性设置为 true 来启用，默认为 false。代码如下：
// 开启平滑滚动效果 <HashLink smooth to="/some-page#some-hash-on-that-page">跳转至目标位置</HashLink>
2. scroll 属性
此属性将在滚动到锚点时执行的滚动距离（以像素为单位）设置为整数值。可以通过将此属性设置为 false 来禁用滚动，默认值为 true。代码如下：
// 规定滚动距离为 100px
<HashLink scroll={100} to="/some-page#some-hash-on-that-page">跳转至目标位置</HashLink>3. offset 属性
此属性是为了解决导航栏固定在页面顶部，锚点锚至其下方导致跳转的位置偏移问题。例如，此时应添加 offset="100"，其中 100 表示导航栏的高度。代码如下：
// 锚点位于导航栏下方，需要添加 offset 属性
<HashLink offset={100} to="/some-page#some-hash-on-that-page">跳转至目标位置</HashLink>4. onClick 属性
此属性将在单击组件时执行的回调函数设置为函数值或未定义。默认为 undefined。代码如下：
// 在单击组件时执行的回调函数
const handleClick = () => {
console.log('Clicked!');
}
<HashLink onClick={handleClick} to="/some-page#some-hash-on-that-page">跳转至目标位置</HashLink>5. replace 属性
此属性将在导航到链接时采用替换历史记录条目的方法还是采用添加历史记录条目的方法（默认）。可以通过将此属性值设置为 true 推进浏览器历史记录而不会创建一个新的记录，这对于 “返回” 或 “重置” 操作非常有用。代码如下：
// 在导航到链接时不会创建一个新的历史记录条目 <HashLink replace to="/some-page#some-hash-on-that-page">跳转至目标位置</HashLink>
示例代码
下面是一个完整的示例代码，展示如何使用 @pharrellwang/react-router-hash-link 实现页面内跳转：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------- - ---- ---------------------------------------
------ ------- -------- ----- -
----- ------- --------- - ------------
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
-----------------------
------- --------------------------------------
--------- -----------------------------
--------- ------ -------------------------------
--- ----------------------
-------- ----- ----- --- ----- ------------ ---------- ----- ------ ------- ------ ---- ------ ------ ------ -------
-------------
-------- ----- ----- --- ----- ------------ ---------- ----- ------ ------- ------ ---- ------ ------ ------ -------
--------- ------------------------------
--------- ------ ------------------------------
---- ----------------------
---- ----------------------
------
--
-小结
本文介绍了 @pharrellwang/react-router-hash-link 这个 npm 包的安装和使用方法，并介绍了其实现原理和高级用法。通过使用这个 npm 包，可以方便地实现页面内的跳转和锚点定位。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005758881e8991b448ea622