রিঅ্যাক্ট-রাউটার-ডোমে রুরটার সাথে কী?

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মোড়ানো উপাদানগুলিতে প্রপসগুলি যখনই রেন্ডার করে pass

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

উইথ রউটার হ'ল একটি অর্ডার উপাদান যা অংশটিকে কিছু অংশে অ্যাক্সেস পেতে নিকটতম রুটের পাস দিয়ে প্রপস থেকে মিলবে কেবলমাত্র উপাদানটিকে উপাদানটিতে থাকা সম্পত্তিটি দিলে এটি অ্যাক্সেস করা যেতে পারে will

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

এবং একই সাথে ম্যাচ এবং অবস্থানের সমৃদ্ধিটি স্থান পরিবর্তন করতে সক্ষম হবে এবং এটি ব্যবহার করে ppops.history.push এটি প্রতিটি উপাদান সম্পত্তি প্রদান করতে হবে তবে এটি যখন রউটার ব্যবহার করা হয় তখন এটি অবস্থানের অ্যাক্সেস হতে পারে এবং সম্পত্তি ইতিহাস যুক্ত না করে ম্যাচ করতে পারে it প্রতিটি রুট জুড়ে সম্পত্তি ইতিহাস যুক্ত না করে দিকনির্দেশে প্রবেশ করা যেতে পারে।