প্রতিক্রিয়া-রাউটার - হ্যান্ডলারের উপাদানগুলিতে প্রপসগুলি পাস করুন

Question

প্রতিক্রিয়া রাউটার ব্যবহার করে আমার React.js অ্যাপ্লিকেশনটির জন্য আমার নীচের কাঠামো রয়েছে :

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

আমি Commentsউপাদানটি কিছু বৈশিষ্ট্য পাস করতে চাই ।

(সাধারণত আমি এটি পছন্দ করতাম <Comments myprop="value" />)

প্রতিক্রিয়া রাউটার দিয়ে এটি করার সবচেয়ে সহজ এবং সঠিক উপায় কী?

Comments

এখানে সমস্যা এবং এই জাতীয় অনুরূপ ক্ষেত্রে, বিশেষত কিছু ল্যাংগুলিতে লিখিত ফ্রেমওয়ার্ক বা লিবসের সাথে সংমিশ্রণের কয়েকটি নির্দিষ্ট উপায় (এমওসি) রয়েছে। প্রিমিটিভের প্রতিক্রিয়া ঠিক বলে মনে হয় তারা বেশ ভাল হয় প্রিমিটিভের সঙ্গে উপাদান সংজ্ঞায়িত, ইন উপাদান এবং উপাদান, প্রতিক্রিয়া MOC , যা ঠিক হিসাবে ভাল প্রতিক্রিয়া বলে মনে হয়। তবে সংমিশ্রণের মাধ্যম অসম্পূর্ণ। একটি উপাদানকে অন্যটির সাথে সংযুক্ত করার সময় একটি উপাদান অবশ্যই প্রপসগুলিকে পাস করতে সক্ষম হতে পারে , কোনও উপাদানটিকে অন্য উপাদানগুলির সন্তানের হিসাবে রাখলে বা কোনও উপাদানকে অন্য প্রপস হিসাবে প্রেরণ করে তা বিবেচনা করে না।

— সেলুক

মত কিছু বাক্য গঠন সঙ্গে <ComponentA x={<ComponentB y={<ComponentC z={} />} />} /> বা <ComponentA x={ComponentB(ComponentC()) } /> অন্যথায়, এই বিমূর্ত সমন্বয় সমস্যা পুনরাবৃত্ত হবে এবং অনুকূল প্রত্যক্ষ ও পরোক্ষ সমাধান মত মোড়কে ইত্যাদি, ইত্যাদি abstractions প্রিমিটিভের হিসাবে প্রথম শ্রেনীর নাগরিক যাই হোক না কেন প্রথম শ্রেণীর উপলব্ধি মানে হওয়া আবশ্যক সমাধান নীচে উপস্থিত নামক চেয়ে কিছু কম করতে হবে।

— সেলুক

Answer 1

হালনাগাদ

নতুন প্রকাশের পর থেকে Route, কোনও র‍্যাপার ব্যবহার না করে সরাসরি উপাদানটির মাধ্যমে প্রপসগুলি সরবরাহ করা সম্ভব । উদাহরণস্বরূপ, প্রপ ব্যবহার করেrender ।

উপাদান:

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      <React.Fragment>
        <h1>Greeting page</h1>
        <p>
          {text} {name}
        </p>
      </React.Fragment>
    );
  }
}

ব্যবহার:

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

কোডস্যান্ডবক্স উদাহরণ

---

পুরাতন রুপ

আমার পছন্দের উপায়টি মোড়ানো হয় Comments উপাদানটি এবং রুট হ্যান্ডলার হিসাবে মোড়কটি পাস করা।

প্রয়োগ করা পরিবর্তনগুলি সহ এটি আপনার উদাহরণ:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var CommentsWrapper = React.createClass({
  render: function () {
    return (
      <Comments myprop="myvalue"/>
    );
  }
});

var Index = React.createClass({
  render: function () {
    return (
      <div>
        <header>Some header</header>
        <RouteHandler/>
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

Comments

আমিও একই সমস্যায় পড়ছি, তবে এই সমাধানটি কি দ্রুত ভার্জোজ হয় না?

— ক্যাপডডাইলাইট

ক্যাপচারডাইলাইটের সাথে একমত হন, এটি ভার্জোজ হয়। এটি হ্যান্ডেল করার আরও ভাল উপায় পছন্দ করবে!

— ম্যাটিয়াস হলস্ট্রোম

@ ম্যাটিয়াশালস্ট্রোম আইএমও, ০.০ এর সর্বোত্তম উপায় হ'ল রুটে সম্পত্তি যুক্ত করা। টমাস ই এর উত্তর দেখুন।

— k00k

আপনি সেখানে একটি <Route path="comments" component={() => (<Comments myProp="value" />)}/>

— রাজ্যহীন

বৈশিষ্ট্যগুলি "পছন্দসই উপায়" হিসাবে পাস করার জন্য আমি অতিরিক্ত উপাদান তৈরি করার সাথে কখনই একমত হব না। এটি ভার্জোজ, জটিল, ত্রুটিযুক্ত প্রবণ এবং কল্পনাযোগ্য প্রতিটি উপায়ে কেবল স্পষ্টতই ভুল। এটি কেবলমাত্র রাউটারের রাউটারের অনুমতি দেয় তবে এটি "পছন্দসই" বলা একটি প্রসারিত। কে পছন্দ করেন?

— জাজেপ্পান হোয়েসজেউস্কি

Answer 2

আপনি যদি র‍্যাপারগুলি না লিখে থাকেন তবে আমার ধারণা আপনি এটি করতে পারতেন:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

Comments

এটি একটি সঠিক উত্তর। প্রতিক্রিয়া-রাউটার 1.0 এ, আপনি routeআপনার উপাদানগুলিতে প্লেইন অবজেক্টটি পেতে পারেন । এখানে গিথুব

— ycdesu

এটি আমি সন্ধান করছিলাম এমন সহজ উত্তর। অন্যান্য কৌশলগুলি কাজ করে তবে 10x কোডের পরিমাণ প্রয়োজন require V1.0.x এর জন্য ভাল কাজ করে আমি কেবলমাত্র খারাপ দিকটি দেখতে পাচ্ছি যদি আপনি রাউটার ধারক সহ এবং ছাড়া উভয়ই একই উপাদানটি ব্যবহার করতে চান। তবে আমার জন্য, আমার সমস্ত শীর্ষ স্তরের উপাদানগুলি রুটগুলির সাথে 1-থেকে -1 ম্যাপ করেছে।

— হত্যাকারী

দুর্দান্ত, ধন্যবাদ! যদি কেউ ভাবছেন, foo সম্পত্তিটি আপনার উপাদান হিসাবে পাওয়া যাবে: this.prop.route.foo

— k00k

বিভ্রান্তি এড়াতে এইটিকে কী সঠিক উত্তর হিসাবে সেট করা যায়?

— আর্চিবাল্ড

নাঃ! আসল সমাধানের জন্য রাজেশ নরোথ উত্তর দেখুন :)

— অ্যালেক্স

Answer 3

গৃহীত প্রতিক্রিয়াতে সান্টিক দ্বারা মন্তব্যগুলি অনুলিপি করা :

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

এটি আমার মতে সর্বাধিক করুণ সমাধান। এটা কাজ করে। আমাকে সাহায্য করে ছিল.

Comments

এটি মূলত উপরের মোড়কের উত্তরের মতোই তবে এটি খুব কম শব্দযুক্ত। মানুষ, যদিও, সিনট্যাক্স sucks। একটি নিক্ষেপ করার চেষ্টা করুন_ref

— EdH

এটি একটি বেনামি মোড়কের মতো, সুতরাং সমস্ত ইনজেকশনযুক্ত প্রপস (উদাহরণস্বরূপ অবস্থান) মিস করা। একজনকে ম্যানুয়ালি component={(props) => (<Comments myProp="value" location={ props.location } />)}

— প্রপস

@ জ্যাকব থমাসন আমরা রিঅ্যাক্ট রাউটার কনফিগারেশনটিকে পুনরায় রেন্ডার করি না সুতরাং এটির পারফরম্যান্স পেনাল্টি হওয়ার সম্ভাবনা কম।

— সেবাস্তিয়ান লরবার

প্রতিক্রিয়া-রাউটার 4 হিসাবে, আপনি যদি একটি ইনলাইন ফাংশন সরবরাহ করেন তবে আপনি প্রচুর অনাকাঙ্ক্ষিত রিমাউন্টিং পাবেন। ইনলাইন রেন্ডারিংয়ের জন্য, রেন্ডার প্রোপ ব্যবহার করুন। দস্তাবেজের লিঙ্ক

— ড্যানিয়েল রেইনা

@ আইউজি এটিকে খুব অগোছালো না করার জন্য এটি করতে পারেন: component={(props) => (<Comments {...props} myProp="value" />)}

— ইনজেকশনযুক্ত প্রপসগুলি

Answer 4

এই রাজেশ থেকে সমাধান , অসুবিধাজনক ছাড়া yuji দ্বারা মন্তব্য , এবং প্রতিক্রিয়া জন্য রাউটার 4 আপডেট করা হয়েছে।

কোডটি এরকম হবে:

<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>

আমি renderপরিবর্তে ব্যবহার করুন নোট করুন component। কারণ হ'ল অনাকাঙ্ক্ষিত পুনরায় গণনা এড়ানো । আমি propsসেই পদ্ধতিতেও পাস করেছি এবং আমি একই উপাদানগুলি স্প্রেড অপারেটর (ES7 প্রস্তাব) এর সাথে মন্তব্য উপাদানগুলিতে ব্যবহার করি।

Comments

অনাকাঙ্ক্ষিত মাউন্টিং সমাধানের সাথে সত্যই দুর্দান্ত! +1

— GLindqvist

Answer 5

ColCh এর উত্তরের কেবল একটি ফলোআপ। কোনও উপাদান মোড়ানোর বিষয়টি বিমূর্ত করা সহজ:

var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

<Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/>

আমি এখনও এই সমাধানটি পরীক্ষা করিনি তাই কোনও প্রতিক্রিয়া গুরুত্বপূর্ণ।

এটি লক্ষণীয় গুরুত্বপূর্ণ যে এই পদ্ধতির মাধ্যমে রাউটারের মাধ্যমে প্রেরিত কোনও প্রপস (যেমন প্যারামগুলি) ওভাররাইট / মুছে ফেলা হবে।

Comments

বব, তুমি কি ক্লোজারের সাথে পরিচিত? stackoverflow.com/questions/111102/...

— sigmus

এবং যদি return React.createElement(Component, _.assign({}, this.props, props));আপনারও রাউটার থেকে ক্যোয়ারী এবং প্যারামগুলির প্রয়োজন হয়, তবে এর মতো কিছু কাজ করবে: (এটি একত্রিত অবজেক্টটি রচনার জন্য _.সাইনাইন ব্যবহার করে ... অন্যান্য পদ্ধতি অবশ্যই পাওয়া যায়)।

— ম্যালকম ডুয়ার 21

আপনি বাচ্চাদের পাস করতে চান var wrapComp घटक = ফাংশন (কম্পোনেন্ট, প্রপস) {React.createClass রিটার্ন };

— জুলিও রডরিগস

যাঁরা তাদের সাথে পরিচিত নন তাদের জন্য এটি একটি উচ্চতর আদেশের উপাদান ফেসবুক.

— github.io/react/docs/higher-order-components.html

এনবি এটি এখন প্রতিক্রিয়া রাউটারের পুরানো সংস্করণের জন্য। বর্তমান V4 হয়েছে render, componentএবং childrenজন্য পদ্ধতি Route। নোট যে হিসাবে @dgrcode উত্তর পয়েন্ট আউট, আপনি ব্যবহার করা উচিত renderপরিবর্তেcomponent

— icc97

Answer 6

আপনি <RouteHandler>প্রপসগুলি সেগুলিতে (v0.13.x এ) বা রাউটের উপাদানটি নিজেই v1.0 এ দিয়ে পাস করতে পারেন ;

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}

( https://github.com/rackt/react-router/releases/tag/v1.0.0 এ আপগ্রেড গাইড থেকে )

সমস্ত শিশু হ্যান্ডলাররা একই প্রসেসগুলি পাবেন - এটি পরিস্থিতিটির উপর নির্ভর করে কার্যকর হতে পারে বা নাও হতে পারে।

Comments

এটি React.cloneElementএকাধিক উপাদানকে পাস করা সত্যই ধাঁধা দেয় তবে ফাংশনের স্বাক্ষরটি কেবল একটি প্রতিক্রিয়া উপাদান নেয় বলে মনে হয়। আমি মনে করি এই স্নিপেটটি বুঝতে সহজতর করা যেতে পারে।

— মানু

এটি স্পষ্টতই ডক্সগুলির সাথে লক্ষ্য নিয়ে সেরা উত্তর, তবে আমি মানুসের সাথেও একমত যে এটি আরও ভাল ব্যবহারের জন্য দেখানোর জন্য লেখা যেতে পারে। প্রশ্নের সাথে আরও সুনির্দিষ্ট কোডটি দেখতে হবে: React.cloneElement(this.props.children, {myprop: "value"})বা React.cloneElement(this.props.children, {myprop: this.props.myprop})ইত্যাদি

— জুনিয়টোগান

এই উত্তর জয়। রাউটার আপনার জন্য স্টাফগুলির মধ্যে কী চলছে তা এটি আরও অনেক স্পষ্ট। যেহেতু কেউ এই কোডটি পড়ছেন, যদি আমি জানতে পারি যে মন্তব্যগুলি সূচকের অভ্যন্তরে রয়েছে, আমি কী সূচিত্রে মন্তব্যগুলিতে প্রেরিত হয় তা দেখার জন্য সূচীটি দেখব। যদি আমি জানতে পারি যে মন্তব্যগুলি একটি রাউটার হ্যান্ডলার, আমি রাউটারের কনফিগারেশনে সন্ধান করব এবং সূচক পিতামাতার মন্তব্যগুলি খুঁজে পাওয়া যাবে এবং এখনও সেদিকে তাকাব।

— mjohnsonengr

Answer 7

ES6 ব্যবহার করে আপনি কেবল উপাদান র‌্যাপারগুলি ইনলাইন করতে পারবেন:

<Route path="/" component={() => <App myProp={someValue}/>} >

আপনার যদি শিশুদের পাস করার দরকার হয়:

<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >

Comments

এটি দুর্দান্ত তবে কোনও কিছু থাকলে এটি শিশুদের মধ্য দিয়ে যায় না।

— zpr

@zpr আমি প্রোপস.চাইল্ডেনদের জন্য উদাহরণ যোগ করেছি

— নিক

হিসাবে @dgrcode উত্তর পয়েন্ট আউট, আপনি ব্যবহার করা উচিত renderপরিবর্তেcomponent

— icc97

Answer 8

প্রতিক্রিয়া-রাউটার ভি 4 আলফা

এটি করার জন্য এখন একটি নতুন উপায় রয়েছে, যদিও আগের পদ্ধতির সাথে খুব মিল রয়েছে।

import { Match, Link, Miss } from 'react-router';
import Homepage from './containers/Homepage';

const route = {
    exactly: true,
    pattern: '/',
    title: `${siteTitle} - homepage`,
    component: Homepage
  }

<Match { ...route } render={(props) => <route.component {...props} />} />

PS এটি কেবল আলফা সংস্করণে কাজ করে এবং v4 আলফা প্রকাশের পরে সরানো হয়েছিল removed ভি 4 সর্বশেষে, আবার একবার, পথ এবং সঠিক প্রপস সহ।

প্রতিক্রিয়া-লেগো উদাহরণ অ্যাপ্লিকেশনটিতে কোড রয়েছে যা তার প্রতিক্রিয়া-রাউটার -4 শাখায় রুটস.জেসগুলিতে ঠিক এটি করে code

Answer 9

এখানে আমি পরিষ্কার সমাধানটি নিয়ে এসেছি (প্রতিক্রিয়া রাউটার ভি 4):

<Route
  path="/"
  component={props => <MyComponent {...props} foo="lol" />}
/>

MyComponentএখনও আছে props.matchএবং props.location, এবং আছে props.foo === "lol"।

Answer 10

এটি একটি স্টেটলেস ফাংশন উপাদান দিয়ে মোড়ানো:

<Router>
  <Route 
    path='/' 
    component={({children}) => 
      <MyComponent myProp={'myVal'}>{children}</MyComponent/>
    }/>
</Router>

Answer 11

মোড়কের উপাদানটি এড়াতে আপনি আরও সহজে রুটহ্যান্ডলার মিক্সিন ব্যবহার করতে পারেন এবং আরও সহজেই পিতামাতার রাজ্যটিকে প্রপস হিসাবে সরাতে পারেন:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var RouteHandler = require('react-router/modules/mixins/RouteHandler');

var Index = React.createClass({
      mixins: [RouteHandler],
      render: function () {
        var handler = this.getRouteHandler({ myProp: 'value'});
        return (
            <div>
                <header>Some header</header>
                {handler}
           </div>
        );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

Comments

এটি বিশ্বব্যাপী রিয়েলট্রাটার হিসাবে প্রকাশ্যে প্রকাশিত হয়েছে ou রুটহ্যান্ডলারমিক্সিন যাতে আমি এটি মনে করি না।

— জুলাই

এটি ট্রানজিশন গ্রুপ এবং সিএসএসট্রান্সিশনগ্রুপ ব্যবহার করে ট্রানজিশনগুলি অ্যানিমেট করার অনুমতি দেয় যা আমি মোড়ক পদ্ধতি ব্যবহার করে কাজ করতে পারি না।

— জুলাই

এটি আশ্চর্যজনক যে সরকারী ডক্সে সে সম্পর্কে কোনও উল্লেখ নেই।

— কোসমেটিকা

প্রতিক্রিয়া দস্তাবেজগুলির দ্বারা মিক্সিনগুলি আর সুপারিশ করা হয় না: ফেসবুক.

— github.io/react/blog/2016/07/13/…

Answer 12

আপনি এর <RouterHandler/>মতো করে প্রপসগুলিতে যেতে পারেন :

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    var props = this.props; // or possibly this.state
    return (
        <div>
            <header>Some header</header>
            <RouteHandler {...props} />
        </div>
    );
  }
});

এর খারাপ দিকটি হ'ল আপনি নির্বিচারে প্রপসগুলি পাস করছেন। সুতরাং Commentsআপনার যাত্রাপথের কনফিগারেশনের উপর নির্ভর করে কোনও পৃথক উপাদানটির জন্য প্রকৃতপক্ষে প্রপসগুলি পাওয়া শেষ হতে পারে। এটি যেহেতু propsঅপরিবর্তনীয়, সেহেতু এটি কোনও বিশাল চুক্তি নয় , তবে যদি দুটি পৃথক উপাদান নামের একটি প্রোপ আশা করে fooতবে বিভিন্ন মান সহ এই সমস্যা হতে পারে ।

Comments

এই সময়সীমার মধ্যে 3 পিরিয়ড / ডটগুলি কী বোঝায় বা বোঝায়:{...props}

— জায়ান্ট এলক

আমার ধারণা ফ্লাক্স কোনও রুটে অভিভাবক অ্যাপ্লিকেশন থেকে রাষ্ট্র প্রেরণ করার প্রয়োজনীয়তা এড়াবে। আমি উপরের কোডটি কাজ করেছিলাম, তবে এটি স্পষ্ট নয় তাই গোপন ম্যাজিকটি কুরুচিপূর্ণ, কী ঘটছে তা সন্ধান এবং ট্র্যাক করা সহজ নয়।

— জায়ান্ট এল্ক

অপারেটরের ব্যাখ্যা ছড়িয়ে দিন । এটি সুস্পষ্ট নয় তবে এটি সবচেয়ে খারাপ জিনিস নয় যেহেতু আপনি প্রপসগুলি অচল করে যাচ্ছেন।

— মাইস্ট্রো

এখানে স্প্রেড অপারেটরের রিঅ্যাকটিজেএস ডক্স রয়েছে: ফেসবুক.github.io/react/docs/jsx-spread.html এবং এছাড়াও ফেসবুক.

— জায়ান্ট এল্ক

এই আমার জন্য কাজ তবে সঠিক বাক্যে হয় {... this.props}

— উইন

Answer 13

১.০ এবং ২.০ এ আপনি আপনার টার্গেট উপাদানটি কীভাবে তৈরি করবেন তা নির্দিষ্ট করতে createElementপ্রপ ব্যবহার করতে পারেন Router। ডকুমেন্টেশন উত্স

function createWithDefaultProps(Component, props) {
    return <Component {...props} myprop="value" />;
}

// and then    
<Router createElement={createWithDefaultProps}>
    ...
</Router>

Answer 14

অনেক ক্লিনার ফলাফল পেতে আপনি এস 6 এবং স্টেটলেস ফাংশনগুলিও একত্রিত করতে পারেন :

import Dashboard from './Dashboard';
import Comments from './Comments';

let dashboardWrapper = () => <Dashboard {...props} />,
    commentsWrapper = () => <Comments {...props} />,
    index = () => <div>
        <header>Some header</header>
        <RouteHandler />
        {this.props.children}
    </div>;

routes = {
    component: index,
    path: '/',
    childRoutes: [
      {
        path: 'comments',
        component: dashboardWrapper
      }, {
        path: 'dashboard',
        component: commentsWrapper
      }
    ]
}

Comments

এটি ঠিক কীভাবে কাজ করে তা সম্পর্কে আমি নিশ্চিত নই - তবে এটি ভুল দেখাচ্ছে। আপনি this.propsএকটি ফাংশন ব্যবহার করছেন , যা আমি নিশ্চিত যে কাজ করবে না। আপনি যদি প্রসারিত করার পরিবর্তে খাঁটি ফাংশন ব্যবহার করে থাকেন React.Componentতবে আপনাকে propsযুক্তি হিসাবে পাস করতে হবে , উপাদান এবং

— প্রপসগুলিতে

Answer 15

প্রতিক্রিয়া রাউটার ভি 4 সমাধান

আমি আজকের আগে এই প্রশ্নটিতে হোঁচট খেয়েছি, এবং আমি যে পদ্ধতিটি ব্যবহার করি তা এখানে। আশা করি এটি আরও বর্তমান সমাধান অনুসন্ধানের জন্য কারও পক্ষে উপকারী।

আমি নিশ্চিত না যে এটিই সেরা সমাধান কিনা তবে এটির জন্য এটি আমার বর্তমান প্যাটার্ন। আমার সাধারণত একটি কোর ডিরেক্টরি রয়েছে যেখানে আমি আমার ব্যবহৃত ব্যবহৃত উপাদানগুলি তাদের প্রাসঙ্গিক কনফিগারেশনের (লোডার, মডেলস, ইত্যাদি) দিয়ে রাখি এবং আমি এই জাতীয় একটি ফাইল অন্তর্ভুক্ত করি:

import React from 'react'
import { Route } from 'react-router-dom'

const getLocationAwareComponent = (component) => (props) => (
  <Route render={(routeProps) => React.createElement(component, 
{...routeProps, ...props})}/>
)

export default getLocationAwareComponent

তারপরে, প্রশ্নযুক্ত ফাইলটিতে আমি নিম্নলিখিতগুলি করব:

import React from 'react'
import someComponent from 'components/SomeComponent'
import { getLocationAwareComponent } from 'components/Core/getLocationAwareComponent'
const SomeComponent = getLocationAwareComponent(someComponent)

// in render method:
<SomeComponent someProp={value} />

আপনি লক্ষ্য করবেন যে আমি আমার উপাদানটির ডিফল্ট রফতানিটিকে নম্র উট-কেস হিসাবে আমদানি করি, যা আমাকে ক্যামেলকেসে নতুন, অবস্থান-সচেতন উপাদানটির নাম দিতে দেয় যাতে আমি এটি সাধারণত ব্যবহার করতে পারি। অতিরিক্ত আমদানি লাইন এবং অ্যাসাইনমেন্ট লাইন ব্যতীত, উপাদানটি প্রত্যাশার মতো আচরণ করে এবং সমস্ত রুট প্রপস যোগ করার সাথে সাথে তার সমস্ত প্রসেসগুলি সাধারণত গ্রহণ করে। সুতরাং, আমি সুখীভাবে এই.পড়গুলি। হিস্টরি.পুষ্প () দিয়ে উপাদান লাইফসাইकल পদ্ধতিগুলি থেকে পুনঃনির্দেশ করতে পারি, অবস্থানটি চেক করব etc.

আশাকরি এটা সাহায্য করবে!

Answer 16

প্রতিক্রিয়া রাউটার জন্য 2.x।

const WrappedComponent = (Container, propsToPass, { children }) => <Container {...propsToPass}>{children}</Container>;

এবং আপনার রুটে ...

<Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}>
</Route>

নিশ্চিত করুন 3 য় PARAM মত একটি বস্তু হল: { checked: false }।

Answer 17

প্রতিক্রিয়া রাউটারের সমস্যাটি হ'ল এটি আপনার উপাদানগুলিকে রেন্ডার করে এবং তাই প্রপসগুলিতে আপনাকে পাস করা বন্ধ করে দেয়। ন্যাভিগেশন রাউটার , অপরপক্ষে, আপনি আপনার নিজের উপাদান রেন্ডার করতে দেয়। তার মানে আপনাকে নীচের কোড হিসাবে এবং প্রেরণে জেএসফিডাল শো হিসাবে প্রপসে যেতে কোনও হুপের মধ্য দিয়ে ঝাঁপিয়ে পড়তে হবে না ।

var Comments = ({myProp}) => <div>{myProp}</div>;

var stateNavigator = new Navigation.StateNavigator([
  {key:'comments', route:''}
]);

stateNavigator.states.comments.navigated = function(data) {
  ReactDOM.render(
    <Comments myProp="value" />,
    document.getElementById('content')
  );
}

stateNavigator.start();

Answer 18

রাজেশ নরোথ উত্তরের ভিত্তিতে রাউটার সহ বা ছাড়াই উপাদানটি ব্যবহার করুন।

class Index extends React.Component {

  constructor(props) {
    super(props);
  }
  render() {
    const foo = (this.props.route) ? this.props.route.foo : this.props.foo;
    return (
      <h1>
        Index - {foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

অথবা আপনি এটি এইভাবে করতে পারেন:

export const Index = ({foo, route}) => {
  const content = (foo) ? foo : (route) ? route.foo : 'No content found!';
  return <h1>{content}</h1>
};

Answer 19

রিঅ্যাক্ট-রাউটার 2.5.2 এর জন্য সমাধানটি এত সহজ:

    //someConponent
...
render:function(){
  return (
    <h1>This is the parent component who pass the prop to this.props.children</h1>
    {this.props.children && React.cloneElement(this.props.children,{myProp:'value'})}
  )
}
...

Answer 20

একটি কাস্টম রুট উপাদান ব্যবহার করে , প্রতিক্রিয়া রাউটার v3 এ এটি সম্ভব।

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var routes = (
  <Route path="/" handler={Index}>
    <MyRoute myprop="value" path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

<MyRoute>উপাদান কোড হিসাবে , এটি কিছু হতে হবে:

import React from 'react';
import { Route } from 'react-router';
import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils';

const MyRoute = () => <div>&lt;MyRoute&gt; elements are for configuration only and should not be rendered</div>;

MyRoute.createRouteFromReactElement = (element, parentRoute) => {
    const { path, myprop } = element.props;
    // dynamically add crud route
    const myRoute = createRoutesFromReactChildren(
        <Route path={path} />,
        parentRoute
    )[0];
    // higher-order component to pass myprop as resource to components
    myRoute.component = ({ children }) => (
        <div>
            {React.Children.map(children, child => React.cloneElement(child, { myprop }))}
        </div>
    );
    return myRoute;
};

export default MyRoute;

কাস্টম রুট উপাদান পদ্ধতির বিষয়ে আরও তথ্যের জন্য, বিষয়টিতে আমার ব্লগ পোস্টটি দেখুন: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

Answer 21

এটি সম্ভবত কুকি হ্যান্ডলারের সাথে প্রতিক্রিয়া-রাউটার-ডোম ব্যবহারের সেরা উপায়

index.js এ

import React, { Component } from 'react'
import {Switch,Route,Redirect} from "react-router-dom"
import {RouteWithLayout} from "./cookieCheck"

import Login from "../app/pages/login"
import DummyLayout from "../app/layouts/dummy"
import DummyPage from "../app/pages/dummy" 

export default ({props})=>{
return(
    <Switch>
        <Route path="/login" component={Login} />
        <RouteWithLayout path="/dummy" layout={DummyLayout} component={DummyPage} 
        {...props}/>
        <Redirect from="/*" to="/login" />
    </Switch>
  )
}

এবং একটি কুকিচেক ব্যবহার করুন

import React , {createElement} from 'react'
import {Route,Redirect} from "react-router-dom"
import {COOKIE,getCookie} from "../services/"

export const RouteWithLayout = ({layout,component,...rest})=>{
    if(getCookie(COOKIE)==null)return <Redirect to="/login"/>
        return (
        <Route {...rest} render={(props) =>
            createElement(layout, {...props, ...rest}, createElement(component, 
      {...props, ...rest}))
       }
      />
    )
}

Answer 22

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      data:null
    }


  }
 componentDidMount(){
   database.ref().on('value', (snapshot) =>{
     this.setState({
       data : snapshot.val()
      })
   });
 }

  render(){
  //  const { data } = this.state
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path = "/" component = { LandingPage }  />
        <Route 
          path='/signup' 
          render = { () => <Signup  data = {this.state.data} />} />
        </Switch>
    </BrowserRouter>

  );
  }
};

export default App;

Answer 23

উপরের মত সমাধানটি ব্যবহার করুন এবং এটি v3.2.5 এ কাজ করে।

<Route
  path="/foo"
  component={() => (
    <Content
      lang="foo"
      meta={{
        description: lang_foo.description
      }}
    />
  )}
/>

অথবা

<Route path="/foo">
  <Content
    lang="foo"
    meta={{
      description: lang_foo.description
    }}
  />
</Route>