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

Question

我有时看到人们在withRouter导出组件时将它们包装起来：

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

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

export default withRouter(Foo);

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

Answer 1

当您在应用程序中包含主页组件时，通常将其包装在这样的<Route>组件中：

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

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

某些组件（通常是标头组件）出现在每个页面上，因此没有包装在中<Route>：

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

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

要解决此问题，可以在withRouter导出时将标头组件包装在一个函数中：

export default withRouter(Header)

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