React SPA 應用 hash 路由如何使用錨點

當咱們在作 SPA 應用的時候，爲了兼容老的瀏覽器（如IE9）咱們不得不放棄 HTML5 browser history api 而只能採用 hash 路由的這種形式來實現前端路由，可是由於 hash 被路由佔據了，致使原本不是問題的錨點功能卻成了一個不大不小的問題。

通過我本身的搜索目前有兩種方式可以解決這個問題，爲了能在 react 生態下面簡單優雅的使用，我專門封裝了一個錨點組件 react-anchor-without-hash，它使用了相似原生 a 標籤的寫法，而且能夠支持滾動的距離和指定滾動的元素，儘量的知足業務的需求。

不過在介紹這個組件以前，仍是得先說一下兩種基本的解決方案。

兩種解決方案

scrollIntoView

scrollIntoView 方法可讓當前的元素滾動到瀏覽器窗口的可視區域內。
它的使用方法以下：

var element = document.getElementById("box");

element.scrollIntoView();

這個 api 兼容 IE8 及以上的瀏覽器，因此能夠放心使用。

注：IE10 以前的 IE 瀏覽器部分支持，具體請查看 Can I Use。

scrollTop

另外一個方法是使用 scrollTop 這個 api，這個方法的兼容性也是比較好的，這個方法相比於 scrollIntoView 來講須要你本身定義要滾動的元素和要滾動的高度，雖然看起來麻煩一些，可是好處是自由度比較高，試想一下下面的場景：

• 你有一個 A 元素在 Content 裏面，Content 設置了滾動，你想讓 A 元素滾動到可視區域內。

• 若是用 scrollIntoView 會變成下面這樣，A 元素顯示到整個瀏覽器視口的最上面，這樣就會和 Header 重合，被遮擋住一部分。

• 因此這時候須要使用 scrollTop 去設置 content 滾動距離，好比說是 60px，最後的效果就變成了咱們想要的結果。

使用方式以下：

const cont = document.querySelector('#container');
const a = document.querySelector('#a');

cont.scrollTop = a.offsetTop + 60;

react-anchor-without-hash

以上兩種方式若是想方便的在項目裏面使用多少都須要封裝一下，並且使用起來和原生的 a 標籤形式也相差甚遠。

可是若是是在 react 技術棧下，咱們能夠利用組件來封裝一個相似 a 標籤的錨點，這樣在使用形式上，咱們就能更接近於原生的方式，下降使用成本。

因而我寫了這個 react 組件，兼容以上兩種方案，讓你可以很是簡單的實現錨點，若是使用了該組件的話，上面的實現方式就會變成下面這樣：

import Anchor from 'react-anchor-without-hash'

// ......

const anchorProps = {
  type: 'scrollTop',
  container: '#container',
  interval: 60
}

<div id="container" style={{position: 'relative', overflow: 'scroll'}}>
  <Anchor name="a" {...anchorProps}>
    <div>
      <h2>This is a</h2>
      <div>There are some text...</div>
    </div>
  </Anchor>
</div>

這時候你只須要在頁面的地址欄輸入: http://somehost/path/#hash?_to=a 頁面就會讓 A 滾動到你想要的位置啦！

github：https://github.com/kwzm/react...

demo：https://kwzm.github.io/react-...

codesandbox: https://codesandbox.io/embed/...

歡迎討論和Star！！！