react在hash模式下不定位到指定id的div

Question

比如

<a href="#first" />
<div id="first" />

点击a的时候，路由是http://xxx.com#first，然后页面会滚动到id为first的页面。

现在用react的hash模式。路由应该是

http://xxx.com#demo?a=aaa&b=bbb#first

但是不会滚动到id为first的div，这种要怎么处理？

是不是因为react这种编译出的html没有dom元素，那这种要在虚拟dom这样的框架中怎么使用呢？

Answer 1

可以使用：React Router Hash Link。

import { HashLink } from 'react-router-hash-link';

...
<HashLink to="/some/path#with-hash-fragment">Link to Hash Fragment</HashLink>

点击 HashLink 就可以跳转到相应的锚点，但是刷新页面不会直接跳到锚点。如果实在没法解决还是建议用 BrowserRouter 取代 HashRouter。

Answer 2

hash模式基于url中#的部分，通过hashChange来完成路由功能（当 URL 的片段标识符发生更改（URL 中以 # 符号开头和之后的部分）时，将触发 hashchange 事件。），相当于锚点的特性已经被占用了。如果需要滚动的话可能需要写一些逻辑进行控制滚动了，这就考验如何去query元素 ，如何去计算（scrollTop），如何做动效（rAf或者tween），要不要做节流，之类之类。整出来的话还挺考验技术的呢，动手感觉一下吧。