我有时看到人们在withRouter导出组件时将它们包装起来:
withRouter
import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo);
这是做什么用的,什么时候应该使用?
当您在应用程序中包含主页组件时,通常将其包装在这样的<Route>组件中:
<Route>
<Route path="/movies" component={MoviesIndex} />
这样,该MoviesIndex组件this.props.history便可以访问,因此可以使用重定向用户this.props.history.push。
MoviesIndex
this.props.history
this.props.history.push
某些组件(通常是标头组件)出现在每个页面上,因此没有包装在中<Route>:
render() { return (<Header />); }
这意味着标题不能重定向用户。
要解决此问题,可以在withRouter导出时将标头组件包装在一个函数中:
export default withRouter(Header)
这使Header组件可以访问this.props.history,这意味着标题现在可以重定向用户。
Header