प्रतिक्रिया-राउटर - हैंडलर घटक के लिए सहारा पास

Question

मेरे पास React Router का उपयोग करके मेरे 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={} />} />} /> OR या <ComponentA x={ComponentB(ComponentC()) } /> अन्यथा जैसे कुछ सिंटैक्स के साथ , अमूर्त के संयोजन की समस्याओं की पुनरावृत्ति होगी और वर्कअराउंड्स जैसे रैपिंग आदि जैसे इष्टतम और अप्रत्यक्ष समाधानों की तुलना में कुछ कम की आवश्यकता होगी, आदि सारों को प्रथम श्रेणी के नागरिक होना चाहिए, जो कि प्रथम श्रेणी की धारणा है।

— सेलकुक

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

मैं एक ही समस्या में चल रहा हूँ, लेकिन इस समाधान जल्दी से क्रिया नहीं मिलता है?

— कैप्टनलाइट

कैप्टेनलाइट से सहमत, यह क्रिया बन जाता है। इससे निपटने के लिए एक बेहतर तरीका पसंद करेंगे!

— मटियास हॉलस्ट्रॉम

@mattiashallstrom IMO, 1.0 में बेहतर तरीका केवल संपत्ति को मार्ग में जोड़ना है। थॉमस ई का जवाब देखें।

— k00k

आप वहाँ एक स्टेटलेस कंपोनेंट सिंटैक्स (बस लैम्ब्डा) भी जोड़ सकते हैं, यह बहुत छोटा है<Route path="comments" component={() => (<Comments myProp="value" />)}/>

— Ciantic

मैं केवल "पसंदीदा तरीका" होने के गुणों को पारित करने के लिए अतिरिक्त घटक बनाने के साथ कभी सहमत नहीं होगा। यह क्रियात्मक, जटिल, त्रुटि प्रवण है और हर तरह से स्पष्ट रूप से हर तरह से कल्पना में गलत है। यह राउटर के लिए केवल एक ही तरीका हो सकता है, लेकिन इसे "पसंदीदा" कहना एक खिंचाव है। किसके द्वारा पसंद किया गया?

— शेजिप्पन होलिज़्यूस्की

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अपने घटक में सादे वस्तु प्राप्त कर सकते हैं । यहाँ github मुद्दे का जवाब है: github.com/rackt/react-router/issues/615#issuecomment-100432086

— ycdesu

यह वह सरल उत्तर है जिसकी मुझे तलाश थी। अन्य तकनीकें काम करती हैं, लेकिन 10x कोड की मात्रा की आवश्यकता होती है। V1.0.x के लिए अच्छी तरह से काम करता है। केवल नकारात्मक पहलू यह है कि यदि आप राउटर कंटेनर के साथ और उसके बिना एक ही घटक का उपयोग करने का इरादा रखते हैं। लेकिन मेरे लिए, मेरे सभी शीर्ष-स्तरीय घटकों ने मार्गों के साथ 1-टू -1 मैप किया।

— किलथ्रश

बहुत धन्यवाद! अगर किसी को आश्चर्य हो रहा है, तो आपके घटक में foo प्रॉपर्टी उपलब्ध होगी जैसे:

— this.props.route.foo

क्या यह भ्रम से बचने के लिए एक सही उत्तर के रूप में सेट किया जा सकता है?

— आर्किबाल्ड

नहीं! असली समाधान के लिए राजेश नरोत्त का उत्तर देखें :)

— एलेक्स

Answer 3

स्वीकृत प्रतिक्रिया में ciantic द्वारा टिप्पणियों से नकल :

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

यह मेरी राय में सबसे सुंदर समाधान है। यह काम करता हैं। मेरी मदद की।

Comments

यह मूल रूप से ऊपर के आवरण के उत्तर के समान है, लेकिन यह बहुत कम चिंताजनक है। हालांकि, आदमी, कि वाक्यविन्यास बेकार है। _ref

— एडएच

यह एक गुमनाम आवरण की तरह है, इसलिए सभी इंजेक्ट किए गए प्रॉप्स (जैसे स्थान) छूट गए हैं। एक को मैन्युअल रूप से प्रॉप्स पास करना पड़ता है, component={(props) => (<Comments myProp="value" location={ props.location } />)}लेकिन यह सब फिर से गड़बड़ हो जाता है

— युजी

@JacobThomason हम राउटर कॉन्फिग को फिर से रेंडर नहीं करते हैं, इसलिए यह एक प्रदर्शन पेनल्टी होने की संभावना नहीं है।

— सेबेस्टियन लॉर्बर

रिएक्ट-राउटर 4 के रूप में, यदि आप एक इनलाइन फ़ंक्शन प्रदान करते हैं तो आपको बहुत अधिक अवांछित रिमाउंटिंग मिलेगी। इनलाइन रेंडरिंग के लिए, रेंडर प्रोप का उपयोग करें। डॉक्स के लिए लिंक

— डैनियल रीना

@yuji करने के लिए नहीं करना यह बहुत गंदा एक कर सकते हैं: component={(props) => (<Comments {...props} myProp="value" />)}इंजेक्शन रंगमंच की सामग्री बनाए रखने के लिए

— apelsinapa

Answer 4

यह राजेश का समाधान है , जो युजी द्वारा की गई असुविधाजनक टिप्पणी के बिना है , और रिएक्ट राउटर 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/…

— सिग्मस

और अगर आपको राउटर से क्वेरी और return React.createElement(Component, _.assign({}, this.props, props));परमेस की आवश्यकता है , तो कुछ इस तरह से काम करेगा: (यह संयुक्त वस्तु की रचना के लिए _.assign का उपयोग करता है ... अन्य विधियां पाठ्यक्रम के उपलब्ध हैं)।

— मैल्कम डायर

आप बच्चों को भी उत्तीर्ण करना चाहते हैं | var wraComponent = function (घटक, प्रॉप्स) {return React.createClass ({रेंडर: फंक्शन) ({{React.createElement (कंपोनेंट, प्रॉप्स, this.props.children)}}}); };

— जूलियो रॉड्रिग्ज

यह उन लोगों के लिए एक उच्च आदेश घटक है जो उनसे परिचित नहीं हैं। facebook.github.io/react/docs/higher-order-compenders.html

— icc97

NB यह अब React Router के पुराने संस्करण के लिए है। वर्तमान 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})आदि

— juanitogan

यह जवाब जीत जाता है। यह एक बहुत अधिक स्पष्ट है कि राउटर आपके लिए क्या सामान करता है के बीच में क्या चल रहा है। जैसा कि कोई कोड पढ़ रहा है, अगर मुझे पता है कि टिप्पणियाँ इंडेक्स के अंदर हैं, तो मैं इंडेक्स को देखूंगा कि क्या टिप्पणियां के लिए प्रॉप्स भेजे गए हैं। अगर मुझे पता है कि टिप्पणियां एक राउटर हैंडलर हैं, तो मैं राउटर कॉन्फिग को देखूंगा और यह पता लगाऊंगा कि इंडेक्स माता-पिता टिप्पणी करते हैं और फिर भी वहां देखते हैं।

— mjohnsonengr

Answer 7

ES6 का उपयोग करके आप केवल घटक आवरण को इनलाइन बना सकते हैं:

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

यदि आपको बच्चे पास करने की आवश्यकता है:

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

Comments

यह अच्छा है, लेकिन यह बच्चों के बीच से नहीं गुजरता है, अगर कोई हो।

— zpr

@zpr मैंने

— Nick

जैसा कि @dgrcode उत्तर बताता है, आपको renderइसके बजाय का उपयोग करना चाहिएcomponent

— icc97

Answer 8

रिएक्ट-राउटर v4 अल्फा

अब ऐसा करने के लिए एक नया तरीका है, हालांकि पिछले विधि के समान है।

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 अल्फा रिलीज के बाद हटा दिया गया था। V4 नवीनतम में, एक बार फिर, पथ और सटीक प्रॉप्स के साथ है।

प्रतिक्रिया-लेगो एक उदाहरण ऐप में कोड होता है जो मार्गों पर ऐसा करता है। इसकी प्रतिक्रिया-राउटर -4 शाखा पर

Answer 9

यहाँ मैं सबसे साफ समाधान (रिएक्टर रूटर v4) के साथ आया हूँ:

<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

यह सार्वजनिक रूप से ग्लोबल बॉवर बिल्ड पर ReactRouter.RouteHandlerMixin के रूप में उजागर हुआ है इसलिए मुझे ऐसा नहीं लगता।

— जुल २

यह भी TransitionGroup और CSSTransitionGroup का उपयोग करके परिवर्तन को एनिमेट करने की अनुमति देता है जो मुझे आवरण विधि का उपयोग करके काम करने के लिए नहीं मिल सकता था।

— जुल २

यह अजीब है कि आधिकारिक डॉक्स में इसके बारे में कोई उल्लेख नहीं है।

— कालसिटिका

मिक्सिन्स अब रिएक्ट डॉक्स द्वारा अनुशंसित नहीं हैं: facebook.github.io/react/blog/2016/07/13/…

— icc97

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}

— विशालकाय एल्क

मुझे लगता है कि फ़्लक्स को मूल ऐप से राज्य को एक मार्ग पर भेजने की आवश्यकता से बचना होगा। मुझे उपरोक्त कोड काम कर रहा है, लेकिन यह स्पष्ट नहीं है इसलिए छिपा हुआ मैजिक बदसूरत है, ट्रेस और ट्रैक करना आसान नहीं है कि क्या हो रहा है।

— विशाल एलक

प्रसार ऑपरेटर स्पष्टीकरण । यह स्पष्ट नहीं है लेकिन, यह सबसे खराब बात नहीं है क्योंकि आप प्रॉपर पास कर रहे हैं जो अपरिवर्तनीय हैं।

— मेस्त्रो

: यहाँ ReactJS डॉक्स प्रसार ऑपरेटर पर है facebook.github.io/react/docs/jsx-spread.html और भी facebook.github.io/react/docs/transferring-props.html

— विशाल एल्क

यह मेरे लिए काम करता है लेकिन सही वाक्यविन्यास है {... this.props}

— विन

Answer 13

1.0 और 2.0 में आप अपने लक्ष्य तत्व को बनाने createElementके Routerलिए निर्दिष्ट करने के लिए प्रोप का उपयोग कर सकते हैं । प्रलेखन स्रोत

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

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

Answer 14

आप बहुत क्लीनर परिणाम प्राप्त करने के लिए es6 और स्टेटलेस कार्यों को भी जोड़ सकते हैं :

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

राउटर v 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} />

आप ध्यान दें कि मैं अपने घटक के डिफ़ॉल्ट निर्यात को विनम्र ऊँट-केस के रूप में आयात करता हूँ, जो मुझे CamelCase में नए, स्थान-जागरूक घटक का नाम देता है ताकि मैं इसे सामान्य रूप से उपयोग कर सकूं। अतिरिक्त आयात लाइन और असाइनमेंट लाइन के अलावा, घटक अपेक्षित रूप से व्यवहार करता है और अपने सभी प्रॉप्स को सामान्य रूप से प्राप्त करता है, सभी रूट प्रॉप्स के अतिरिक्त के साथ। इस प्रकार, मैं खुशी से घटक जीवनचक्र विधियों से इस .props.history.push (), स्थान की जाँच, आदि से पुनर्निर्देशित कर सकता हूँ।

उम्मीद है की यह मदद करेगा!

Answer 16

प्रतिक्रिया के लिए रूटर 2.x.

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

और आपके मार्गों में ...

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

सुनिश्चित करें कि तीसरा परम एक वस्तु है { 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>