Question

我最近更新了路由器版本4的反应。在之前的版本中，我使用onUpdate回调来触发一个功能，使页面在路由更改时滚动到顶部。

onUpdate似乎已被弃用，我无法在文档中的任何位置找到它所取代的内容。

还有其他人遇到过这个问题吗？

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

ReactDOM.render(
    <Provider store={store}>
        <Router onUpdate={handlePageChange} history={browserHistory}>
            <Redirect from="/" to="/music" />
            {routes}
        </Router>
    </Provider>,
    document.getElementById('root')
);

Answer 1

＆＃34;的onUpdate＆＃34;折旧。您可以使用＆＃34; onEnter＆＃34;属于＆＃34;路线＆＃34;。

<Router history={browserHistory}>
  <Route path="/" component={App} >
    <IndexRoute component={Home} />
    <Route path="/contact-us" component={ContactUs} onEnter={handlePageChange}/>
  </Route>
</Router>

还需要修改你的＆＃34; handlePageChange＆＃34;功能如下：

const handlePageChange = () => {
    window.scrollTo(0, 0);
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }
}

Answer 2

另一个选项是在页面组件安装时滚动页面：

class NotFoundView extends React.Component {
  componentDidMount() {
    window.scrollTo(0, 0);
  }

  render() {
    var props = this.props;

    return (
      <div className="NotFound">
        <HeaderContainer />

        <h1>Coming Soon!</h1>
      </div>
    )
  }
}

export default NotFoundView;

Answer 3

有一种名为context.router.subscribe的替代品......

你可以使用这样的东西：

import React from 'react';

class App extends React.Component {
  //something like this in your code
  componentDidMount() {
    this.context.router.subscribe(() => {
        console.log("change router");
    })
   }
    render() {
    return <button>hi</button>;
  }
}

export default App;

Answer 4

@ Alireza的答案是朝着正确的方向发展的，但它并不完全。

为了能够使用React's Context API访问路由器，组件必须都是路由器的子级，并且应该定义contextTypes属性：

static contextTypes = {
  router: PropTypes.object
};

这将确保路由器连接到该组件。

此外，你不能（或不再？）subscribe到路由器。但是，可以将侦听器附加到历史记录：

this.context.router.history.listen(handlePageChange)

您可能希望在组件的componentDidMount生命周期方法中执行此操作。

反应路由器v4 onUpdate

4 个答案: