在页面顶部打开<Link>

Question

我正在使用React Router 4,当我使用<Link>新页面时,不会在页面顶部打开.我需要讲<Link>一些具体的内容吗？

<Link to="/mypage">My Page</Link>

Answer 1

我知道我的答案可能与以前相似，但我只是想帮助那些使用React Hooks并且可能会遇到这个问题/答案的人......

useLayoutEffect(() => {
    window.scrollTo(0, 0)
});

基本上，我的意思是，在window.scrollTo(0, 0)里面添加useLayoutEffect并且会正常工作。

Answer 2

在类似问题的答案中，我找到了一个非常可靠的答案。无论如何，它对我有用，所以我想我会分享。

根据您的情况，在“ / mypage” window.scrollTo(0, 0);的组件中添加到componentDidMount函数。像这样：

import ...
export default class MyPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            ...
        };
    }

    componentDidMount() {
        window.scrollTo(0, 0);
    }

    render() {
        return (
            ...
        )
    }
}

Link组件将处理导航到新路径的过程，一旦安装了新组件，它将自动滚动到顶部。

Answer 3

所以我找到了一个非常酷的解决方案.基本上你需要创建一个包装器组件(它将包裹Route),它只负责滚动到顶部.然后,您需要在路由器中使用包装器而不是路由器.完整的解决方案在这里: react-router在每次转换时滚动到顶部

向下滚动到它所说的位置:对于react-router v4

PS确保你的.babelrc中配置了对象 - rest-spread.这是一个链接:

https://babeljs.io/docs/plugins/transform-object-rest-spread/