react-router-dom에서 withRouter는 무엇입니까?

나는 때때로 사람들 withRouter이 그들을 내보낼 때 구성 요소를 감싸는 것을 보았습니다 .

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

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

export default withRouter(Foo);

이것은 무엇을위한 것이며 언제 사용해야합니까?

앱에 기본 페이지 구성 요소를 포함하면 종종 <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헤더가 이제 사용자를 리디렉션 할 수 있습니다.

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

자세한 정보는 여기 에서 찾을 수 있습니다 .

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

withRouter는 가장 가까운 경로를 통과하여 위치와 일치하는 속성에 대한 액세스 권한을 얻기 위해 구성 요소에있는 속성을 구성 요소에 제공하는 경우에만 액세스 할 수 있습니다.

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

일치와 위치 번영이 동일하게 위치를 변경할 수 있고 this.props.history.push를 사용할 수 있도록 각 구성 요소 속성에 대해 제공해야하지만 WithRouter를 사용하면 속성 히스토리를 추가하지 않고도 위치 및 일치에 액세스 할 수 있습니다. 각 Route에 속성 이력을 추가하지 않고도 방향에 액세스 할 수 있습니다.