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-anchor-without-hash

demo：https://kwzm.github.io/react-anchor-without-hash/

codesandbox: https://codesandbox.io/embed/react-anchor-without-hash-2xq2h

歡迎討論和Star！！！