小编典典

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

reactjs

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

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

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

export default withRouter(Foo);

这是做什么用的,什么时候应该使用?


阅读 312

收藏
2020-07-22

共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,这意味着标题现在可以重定向用户。

2020-07-22