使用 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>
)
}
}
Run Code Online (Sandbox Code Playgroud)
但是它不起作用。我感觉问题出在我的导航风格上,而不是 window.scrollTo() 片段。
reactjs ×1