WithRouter dùng để làm gì trong react-router-dom?

Đôi khi tôi đã thấy mọi người bọc các thành phần của họ vào withRouterkhi họ xuất chúng:

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

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

export default withRouter(Foo);

Cái này dùng để làm gì, và khi nào tôi nên dùng nó?

Khi bạn bao gồm một thành phần trang chính trong ứng dụng của mình, nó thường được bao bọc trong một <Route>thành phần như sau:

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

Bằng cách làm này, MoviesIndexthành phần có quyền truy cập để this.props.historynó có thể chuyển hướng người dùng với this.props.history.push.

Một số thành phần (thường là thành phần tiêu đề) xuất hiện trên mọi trang, vì vậy không được bao bọc trong <Route>:

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

Điều này có nghĩa là tiêu đề không thể chuyển hướng người dùng.

Để khắc phục sự cố này, thành phần tiêu đề có thể được bao bọc trong một withRouterhàm, hoặc khi nó được xuất:

export default withRouter(Header)

Điều này cho phép Headerthành phần truy cập vào this.props.history, có nghĩa là bây giờ tiêu đề có thể chuyển hướng người dùng.

withRouterlà một thành phần thứ tự cao hơn sẽ truyền tuyến đường match, hiện tại locationvà historyđạo cụ gần nhất đến thành phần được bao bọc bất cứ khi nào nó hiển thị. chỉ đơn giản là nó kết nối thành phần với bộ định tuyến.

Không phải tất cả các thành phần, đặc biệt là các thành phần dùng chung, sẽ có quyền truy cập vào các đạo cụ của bộ định tuyến đó. Bên trong các thành phần được bao bọc của nó, bạn sẽ có thể truy cập vào locationprop và nhận thêm thông tin như location.pathnamehoặc chuyển hướng người dùng đến các url khác bằng cách sử dụng this.props.history.push.

Đây là một ví dụ hoàn chỉnh từ trang github của họ:

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

Thông tin thêm có thể được tìm thấy ở đây .

withRouterthành phần bậc cao hơn cho phép bạn truy cập vào các historythuộc tính của đối tượng và <Route>kết quả khớp gần nhất . withRoutersẽ vượt qua được cập nhật match, locationvà historyđạo cụ để các thành phần quấn bất cứ khi nào nó ám.

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 là một thành phần bậc cao sẽ vượt qua tuyến đường gần nhất để truy cập vào một số thuộc tính như vị trí và khớp từ các đạo cụ, nó chỉ có thể được truy cập nếu cung cấp cho thành phần thuộc tính nằm trong thành phần

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

và trùng khớp và độ thịnh vượng vị trí để có thể thay đổi vị trí và sử dụng this.props.history.push, nó phải được cung cấp cho mỗi thuộc tính thành phần phải cung cấp nhưng khi được sử dụng WithRouter, nó có thể được truy cập vào vị trí và khớp mà không cần thêm lịch sử thuộc tính. có thể được truy cập hướng mà không cần thêm lịch sử tài sản cho mỗi Tuyến đường.