React应用中，使用react-router进行路由管理，可以很方便的实现单页面应用，但是有些情况下，切换页面时需要保持滚动位置的状态，这时候可以使用npm包 react-router-scroll。
什么是react-router-scroll？
react-router-scroll是一个高阶组件，可以用于将当前路由页面的滚动位置存储下来，在切换到其他页面时，自动恢复之前的滚动位置。
如何安装react-router-scroll？
使用npm安装即可：
npm install react-router-scroll --save
如何使用react-router-scroll？
react-router-scroll可以通过withRouter高阶组件来包装需要保持滚动位置的组件。
首先，需要在router的配置中加入react-router-scroll：
-- -------------------- ---- ------- ------ - ------- ------ -------------- - ---- --------------- ------ --------- ---- ------------------------------------ ----- ------ - - ------- ------------------------ -------------------------------------------- ------ -------- ---------------- ------ ------------ ----------------- -- ------ ------------ ----------------- -- -------- --------- --展开代码
接着，在需要添加保持滚动位置效果的组件上加上withRouter高阶组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ---------- - ---- ---------------------- ----- ----------- ------- --------------- - -------- - ------ - ----- ----- ------------- ------ -- - - ------ ------- ------------------------展开代码
注意事项
在使用react-router-scroll的过程中，要谨慎处理与react-router的配置中的其他中间件的相互影响关系。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ------ -------------- - ---- --------------- ------ --------- ---- ------------------------------------ ------ - ---------- - ---- ---------------------- ----- ----------- ------- --------------- - -------- - ------ - ----- ----- ------------- ------ -- - - ----- --- - -- -- - ----- ------------ ---- --------- ----------------------------- --------- ----------------------------- ----- --------------------- ------ -- ----- ----- - -- -- - ----- -------- ------ ------------ -- ------------ -- ------------ -- ------------ -- ------ -- ----- ----- - -- -- - ----- -------- ------ ------------ -- ------------ -- ------------ -- ------------ -- ------ -- ------ ------- -- -- - ------- ------------------------ -------------------------------------------- ------ -------- ---------------- ------ ------------ ----------------- -- ------ ------------ ----------------- -- -------- --------- --展开代码
通过上面的例子，可以看到react-router-scroll可以很方便的帮助我们实现路由页面间的滚动位置保持效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67208
