我有sometimes seen个人在出口组件时将其包装在withRouter中:
import { withRouter } from 'react-router-dom';
class Foo extends React.Component {
// ...
}
export default withRouter(Foo);
这是干什么用的？我什么时候用？
我有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重定向用户.
有些组件(通常是页眉组件)出现在每页上，因此没有包装在<Route>中:
render() {
return (<Header />);
}
这意味着标头无法重定向用户.
为了解决这个问题，可以在导出头组件时将其包装在withRouter函数中:
export default withRouter(Header)
这使Header组件可以访问this.props.history，这意味着报头现在可以重定向用户.