reactjs - 在react-router-dom中withRouter有什么用？

我sometimes seen人们在导出组件时将其组件包装在withRouter中:

import { withRouter } from 'react-router-dom';

class Foo extends React.Component {
  // ...
}

export default withRouter(Foo);

这是做什么用的，什么时候应该使用？

最佳答案

当您在应用程序中包含主页组件时，通常将其包装在<Route>组件中，如下所示:

<Route path="/movies" component={MoviesIndex} />

通过这样做，MoviesIndex组件可以访问this.props.history，因此可以使用this.props.history.push重定向用户。

一些组件(通常是 header 组件)出现在每个页面上，因此没有包装在<Route>中:

render() {
  return (<Header />);
}

这意味着标题不能重定向用户。

要解决此问题，可以在导出时将 header 组件包装在 withRouter 函数中:

export default withRouter(Header)

这使Header组件可以访问this.props.history，这意味着 header 现在可以重定向用户。