reactjs-react-router-dom中的withRouter是什么?

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

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

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

export default withRouter(Foo);

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

LondonRob asked 2020-08-02T12:05:42Z
3个解决方案
85 votes

当您在应用程序中包含主页组件时,通常将其包装在MoviesIndex组件中,如下所示:

<Route path="/movies" component={MoviesIndex} />

这样,MoviesIndex组件可以访问Header,因此它可以使用this.props.history重定向用户。

一些组件(通常是标头组件)出现在每个页面上,因此没有包装在Header中:

render() {
  return (<Header />);
}

这意味着标题不能重定向用户。

要解决此问题,可以在导出时将标头组件包装在Header函数中:

export default withRouter(Header)

这使Header组件可以访问this.props.history,这意味着标头现在可以重定向用户。

LondonRob answered 2020-08-02T12:06:21Z
16 votes

location是一个高阶组件,无论何时渲染,都会通过最接近的路线location.pathname,当前this.props.history.pushhistory道具到达包装的组件。 只需将组件连接到路由器即可。

并非所有组件(尤其是共享组件)都可以访问此类路由器的道具。 在其包装的组件内部,您将能够访问location prop,并获取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);

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

Muhammad Soliman answered 2020-08-02T12:06:55Z
0 votes

withRouter是一个高阶组件,它将传递最接近的路线以访问某些属性,如位置和道具的匹配,只有赋予组件位于组件中的属性,才能访问该属性

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

并且匹配和位置繁荣,以便能够更改位置并使用this.props.history.push应该为每个组件属性提供必须提供的属性,但是使用WithRouter时,可以访问位置并进行匹配而无需添加属性历史记录 可以访问方向,而无需为每个路径添加属性历史记录。

Mohammed_Alreai answered 2020-08-02T12:07:20Z
translate from https://stackoverflow.com:/questions/53539314/what-is-withrouter-for-in-react-router-dom