Skip to content
This repository was archived by the owner on Jan 8, 2019. It is now read-only.
This repository was archived by the owner on Jan 8, 2019. It is now read-only.

SPA单页应用滚动条信息问题(同构) #8

@BetaMee

Description

@BetaMee

又踩坑了。
发现了一个比较严重的问题,就是整个react应用页面切换的时候滚动条不会重置到最顶端。

比如有两个页面,第一个页面没滚动,进去第二个,滚到底,返回第一个页面也滚到底。这个应该是React-Router上的问题,React Router 不维护 scroll position。

所以有两个方法,一个是在组件更新的时候componentWillUpdate期间调用window.scrollTo(0.0),问题是这个项目是server side rendering,服务端可没有window这个对象。此计不行。
查react-router issue,有一个方法是这样的:

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router>

但是这个还不是要在服务端运行吗?,不抱希望地试了试,结果可行!那就得出一个结论,组件初始渲染生成HTML,生命周期是到componentWillUpdate(相关资料),所以window对象无法使用,但Router组件不参与渲染,所以加上一个更新函数可用。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions