reactjs - 在导航更改时滚动恢复到顶部
问题描述
使用 react-router 导航时,我遇到了滚动问题。
当我导航到不同的组件时,它会保持上次导航的滚动位置。但是,我希望它在导航更改时恢复并从顶部开始。
class App extends Component{
render() {
return(
<BrowserRouter onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
<div style={{display: 'flex'}}>
<div className='navBar'>
<ul style={{listStyleType: 'none'}}>
<li><Link to='/'>Home</Link></li>
<li><Link to='/towns'>Towns</Link></li>
<li><Link to='/pubs'>Pubs</Link></li>
<li><Link to='/venues'>Venues</Link></li>
<li><Link to='/cinemas'>Cinemas</Link></li>
</ul>
</div>
<div style={{flex:1, padding:'0px'}}>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</div>
</div>
</BrowserRouter>
)
}
}
但是它不起作用。我感觉问题出在我的导航风格上,而不是 window.scrollTo() 片段。
解决方案
据我所知,由于 react-router v4BrowserRouter
没有onUpdate
功能。
几种方法来完成它。这将是最简单的...
组件/ScrollIntoView.js
import { PureComponent } from "react";
import { withRouter } from "react-router-dom";
class ScrollIntoView extends PureComponent {
componentDidMount = () => window.scrollTo(0, 0);
componentDidUpdate = prevProps => {
if (this.props.location.pathname !== prevProps.location.pathname) window.scrollTo(0, 0);
};
render = () => this.props.children;
}
export default withRouter(ScrollIntoView);
路线/index.js
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Links from "../components/Links";
import Home from "../components/Home";
import About from "../components/About";
import Contact from "../components/Contact";
import ScrollIntoView from "../components/ScrollIntoView";
export default () => (
<BrowserRouter>
<div>
<ScrollIntoView>
<Links />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
<Links />
</ScrollIntoView>
</div>
</BrowserRouter>
);
或者你可以在这里找到另一种方法:在 react.js 中渲染后滚动到页面顶部
推荐阅读
- android - 单击通知 FCM 时未打开所需的活动
- php - 自定义 tag.php 模板
- yii2 - 如何在 yii2 中手动向供应商添加扩展
- javascript - 多次调用函数并保存结果
- android - 如何使用 NativeScript 获取主 Google 帐户?
- javascript - 类型错误:this.props.weather 未定义
- git - ssh:无法解析主机名 git:名称或服务未知 致命:无法从远程存储库读取
- python - 无法在 python(jupyter)中创建术语文档矩阵
- highcharts - highstock:当系列与 sma 相交时如何更改区域样条中的颜色
- java-9 - GluonVM、源代码和 JDK 兼容性