Question

我有sometimes seen个人在导出组件时将其包装在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，这意味着标题现在可以重定向用户。

Answer 2

withRouter是一个更高阶的组件，它在渲染时会通过最近路线的match，当前location和history道具传递到包装的组件。只需将组件连接到路由器即可。

并非所有组件（尤其是共享组件）都可以访问此类路由器的道具。在其包装的组件内部，您将能够访问location属性并获得诸如location.pathname之类的更多信息，或者使用this.props.history.push将用户重定向到其他url。

这是他们github页面上的完整示例：

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

可以找到更多信息here。

Answer 3

withRouter是一个高阶组件，它将传递最接近的路线以访问某些属性，例如，只有在为组件赋予组件中的属性时，才能通过道具进行匹配

<Route to="/app" component={helo} history ={history} />

以及匹配和位置的繁荣，以便能够更改位置并使用this.props.history.push应该为每个组件属性提供必须提供的属性，但是当与WithRouter一起使用时，可以访问位置并进行匹配而无需添加属性历史记录，可以直接访问它，而无需为每个路线添加属性历史记录。

Answer 4

withRouter高阶组件使您可以访问history对象的属性和最接近的<Route>匹配项。每当渲染时，withRouter会将更新后的match，location和history道具传递给包装的组件。

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

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

4 个答案: