WithRouter'ın react-router-dom'da ne işi var?

Ben ettik bazen görülen insanlar kendi bileşenlerini sarmak withRouteronları ihraç zaman:

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

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

export default withRouter(Foo);

Bu ne için ve ne zaman kullanmalıyım?

Uygulamanıza bir ana sayfa bileşeni eklediğinizde, genellikle aşağıdaki <Route>gibi bir bileşene sarılır :

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

Bunu yaparak, MoviesIndexbileşenin, this.props.historykullanıcıyı yeniden yönlendirebilmesi için erişimine sahip olur this.props.history.push.

Bazı bileşenler (genellikle bir başlık bileşeni) bu yüzden sarılmış değil, her sayfada görünür <Route>:

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

Bu, başlığın kullanıcıyı yeniden yönlendiremeyeceği anlamına gelir.

Bu sorunu aşmak için, üstbilgi bileşeni withRouterdışa aktarıldığında bir işleve sarılabilir :

export default withRouter(Header)

Bu, Headerbileşene erişim sağlar this.props.history, yani başlık artık kullanıcıyı yeniden yönlendirebilir.

withRouteren yakın rotaları match, akımı locationve historypropları her render edildiğinde sarmalanmış bileşene aktaran daha yüksek dereceli bir bileşendir . basitçe bileşeni yönlendiriciye bağlar.

Tüm bileşenler, özellikle paylaşılan bileşenler, bu tür yönlendiricinin donanımlarına erişime sahip olmayacaktır. Sarılmış bileşenlerinin içinde, locationpervaneye erişebilir ve location.pathnamekullanıcı gibi daha fazla bilgi alabilir veya kullanıcıyı farklı bir url'ye yönlendirebilirsiniz this.props.history.push.

İşte github sayfasından eksiksiz bir örnek:

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

Daha fazla bilgi burada bulunabilir .

withRouteryüksek dereceli bileşen, historynesnenin özelliklerine ve en yakın <Route>eşleşmesine erişmenizi sağlar . withRoutergüncellenmiş geçiren edecek match, locationve historybu hale ne zaman sarılmış bileşene sahne.

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, bazı mülklere erişim sağlamak için en yakın rotaları geçecek ve nesnelerden eşleştirme ve yalnızca bileşene bileşen içinde bulunan özelliği verirse erişilebilir.

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

ve konumu değiştirebilmek ve this.props.history.push kullanabilmek için aynı eşleşme ve konum refahı sağlaması gereken her bileşen özelliği için sağlanmalıdır, ancak WithRouter kullanıldığında, özellik geçmişi eklemeden konuma ve eşleşmeye erişebilir her Rotadan özellik geçmişi eklenmeden yöne erişilebilir.