Untuk apa withRouter di react-router-dom?

Saya terkadang melihat orang membungkus komponen withRoutermereka saat mereka mengekspornya:

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

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

export default withRouter(Foo);

Untuk apa ini, dan kapan saya harus menggunakannya?

Saat Anda menyertakan komponen halaman utama dalam aplikasi Anda, itu sering kali dibungkus dengan <Route>komponen seperti ini:

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

Dengan melakukan ini, MoviesIndexkomponen memiliki akses this.props.historysehingga dapat mengarahkan pengguna this.props.history.push.

Beberapa komponen (biasanya komponen header) muncul di setiap halaman, jadi tidak digabungkan dalam <Route>:

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

Artinya, header tidak dapat mengarahkan pengguna.

Untuk mengatasi masalah ini, komponen header bisa dibungkus dalam sebuah withRouterfungsi, baik saat diekspor:

export default withRouter(Header)

Ini memberikan Headerakses komponen ke this.props.history, yang berarti header sekarang dapat mengarahkan pengguna.

withRouteradalah komponen tingkat tinggi yang akan meneruskan rute terdekat match, arus location, dan properti historyke komponen yang dibungkus setiap kali dirender. cukup dengan menghubungkan komponen ke router.

Tidak semua komponen, terutama komponen bersama, akan memiliki akses ke props router tersebut. Di dalam komponen yang dibungkus, Anda akan dapat mengakses locationprop dan mendapatkan lebih banyak informasi seperti location.pathnameatau mengarahkan pengguna ke url yang berbeda menggunakan this.props.history.push.

Berikut contoh lengkap dari halaman github mereka:

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

Informasi lebih lanjut dapat ditemukan di sini .

withRouterKomponen tingkat tinggi memungkinkan Anda untuk mendapatkan akses ke historyproperti objek dan <Route>kecocokan terdekat . withRouterakan meneruskan update match,, locationdan historyprops ke komponen yang dibungkus setiap kali dirender.

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 adalah komponen tingkat tinggi yang akan melewati rute terdekat untuk mendapatkan akses ke beberapa properti untuk lokasi dan cocok dari props itu hanya dapat diakses jika memberikan komponen properti yang terletak di komponen

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

dan sama kecocokan dan kemakmuran lokasi untuk dapat mengubah lokasi dan menggunakan this.props.history.push itu harus disediakan untuk setiap properti komponen harus menyediakan tetapi ketika digunakan WithRouter itu dapat akses ke lokasi dan cocok tanpa menambahkan riwayat properti itu dapat diakses arah tanpa menambahkan riwayat properti dari setiap Rute.