प्रतिक्रिया-राउटर-डोम के लिए withRouter क्या है?

Question 1

मैंने कभी-कभी लोगों को अपने घटकों को लपेटते हुए देखा है withRouterजब वे उन्हें निर्यात कर रहे हैं:

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

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

export default withRouter(Foo);

यह किस लिए है, और मुझे इसका उपयोग कब करना चाहिए?

Question 2

जब आप अपने ऐप में एक मुख्य पृष्ठ घटक शामिल करते हैं, तो इसे अक्सर <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, जिसका अर्थ है कि हेडर अब उपयोगकर्ता को रीडायरेक्ट कर सकता है।

Question 3

withRouterएक उच्च क्रम घटक है जो निकटतम मार्ग के पास match, वर्तमान location, और historyलिपटे घटक को सहारा देगा जब भी यह प्रदान करता है। बस यह घटक को राउटर से जोड़ता है।

सभी घटक, विशेष रूप से साझा किए गए घटक, ऐसे राउटर के प्रॉप्स तक पहुंच नहीं होगी। इसके लिपटे घटकों के अंदर, आप locationप्रोप का उपयोग करने में सक्षम होंगे और location.pathnameउपयोगकर्ता को अलग-अलग यूआरएल का उपयोग करने जैसी अधिक जानकारी प्राप्त करने या पुनर्निर्देशित करने में सक्षम होंगे this.props.history.push।

यहाँ उनके जीथब पृष्ठ से एक पूर्ण उदाहरण दिया गया है:

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

अधिक जानकारी यहाँ मिल सकती है ।

Question 4

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

Question 5

withRouter एक उच्च-क्रम का घटक है जो निकटतम संपत्ति को पास करने के लिए कुछ संपत्ति तक पहुंच प्राप्त करने के लिए और प्रॉप्स से मिलान करने के लिए इसे तभी एक्सेस किया जा सकता है जब घटक घटक में स्थित संपत्ति दे।

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

और मैच और स्थान की समृद्धि स्थान को बदलने में सक्षम होने के लिए और इस का उपयोग किया। props.history.push इसे प्रत्येक घटक के लिए प्रदान किया जाना चाहिए संपत्ति प्रदान करनी चाहिए, लेकिन जब इस्तेमाल किया WithRouter यह स्थान के लिए उपयोग किया जा सकता है और संपत्ति के इतिहास को जोड़ने के बिना मिलान कर सकता है। प्रत्येक रूट को प्रॉपर्टी हिस्ट्री जोड़ने के बिना दिशा में पहुँचा जा सकता है।