रिएक्ट-राउटर 4.0.0 पास करने के लिए प्रॉप्स पास करना

Question

मैं मौजूदा प्रतिक्रिया-राउटर 3.0.0 ऐप को 4.0.0 पर माइग्रेट करने का प्रयास कर रहा हूं। राउटर के भीतर, मुझे अपने बच्चों को एक अतिरिक्त गैर रूटिंग-संबंधित prop पास करने की आवश्यकता है।

प्रतिक्रिया-राउटर, detailed in this post के पिछले संस्करणों में इसे पूरा करने के कुछ हद तक हैकी तरीके हैं। मेरा व्यक्तिगत पसंदीदा cloneElement का उपयोग कर this method था, के बाद से यह सुनिश्चित किया कि प्रतिक्रिया रूटर रंगमंच की सामग्री के सभी पर कॉपी कर रहे थे के रूप में अच्छी तरह से:

// react-router 3.0.0 index.js JSX 
<Router history={browserHistory} 
    <Route path="/" component={App}> 
    <Route path="/user/:userId" component={User} /> 
    <IndexRoute component={Home} /> 
    </Route> 
</Routes> 

// App component JSX (uses cloneElement to add a prop) 
<div className="App"> 
    { cloneElement(props.children, { appState: value }) } 
</div> 

अब तक मेरी नई अनुप्रयोग घटक लगता है:

// react-router 4.0.0 App component JSX (moved routing code out of index.js and into here) 
<BrowserRouter> 
    <div className="App"> 
    <Match exactly pattern="/" component={Home} /> 
    <Match pattern="/user/:userId" component={User} /> 
    <Miss component={Home} /> 
    </div> 
</BrowserRouter> 

क्या है प्रदत्त राउटर प्रोप को बनाए रखते हुए Match के प्रत्येक घटक को appState को जोड़ने का सबसे अच्छा तरीका है?

Answer 1

<Route>component के बजाय render प्रोप ले सकता है। यह आपको घटक परिभाषा को रेखांकित करने की अनुमति देता है।

<Route path='/user/:userId' render={(props) => (
    <User appState={value} {...props} /> 
)} />