reactRouter for react-router-dom是什么？

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

Answer 2

withRouter是一个更高阶的组件，它会在渲染时将最近路线的match，current location和historyprops传递给包装的组件。只需将组件连接到路由器即可。

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

这是他们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);

在这里可以找到更多信息。

Answer 3

withRouter高阶组件允许您访问history对象的属性和最接近<Route>的匹配项。每当它呈现时，withRouter都会将 updated match、location和historyprops 传递给包装的组件。

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);