ध्यान दें, यह उत्तर रिएक्ट राउटर संस्करण 0.13.x को कवर करता है - आगामी संस्करण 1.0 ऐसा लगता है कि इसमें काफी अलग कार्यान्वयन विवरण होंगे
सर्वर
यह server.jsप्रतिक्रिया-राउटर के साथ एक न्यूनतम है :
var express = require('express')
var React = require('react')
var Router = require('react-router')
var routes = require('./routes')
var app = express()
// ...express config...
app.use(function(req, res, next) {
var router = Router.create({location: req.url, routes: routes})
router.run(function(Handler, state) {
var html = React.renderToString(<Handler/>)
return res.render('react_page', {html: html})
})
})
जहां routesमॉड्यूल रूट की सूची निर्यात करता है:
var React = require('react')
var {DefaultRoute, NotFoundRoute, Route} = require('react-router')
module.exports = [
<Route path="/" handler={require('./components/App')}>
{/* ... */}
</Route>
]
हर बार सर्वर से एक अनुरोध किया जाता है, आप Routerआने वाले URL के साथ उसके स्थिर स्थान के रूप में कॉन्फ़िगर किए गए एकल-उपयोग का उदाहरण बनाते हैं , जिसे उचित मिलान वाले मार्गों को सेट करने के लिए मार्गों के पेड़ के खिलाफ हल किया जाता है, जो शीर्ष-स्तर के साथ वापस बुलाता है। रूट हैंडलर का प्रतिपादन किया जाना और प्रत्येक स्तर पर बाल मार्गों का मिलान करना। जब आप <RouteHandler>मिलान किए गए चाइल्ड रूट को रेंडर करने के लिए रूट हैंडलिंग कंपोनेंट के भीतर कंपोनेंट का उपयोग करते हैं तो यही सलाह ली जाती है ।
यदि उपयोगकर्ता ने जावास्क्रिप्ट बंद कर दिया है, या इसे लोड करना धीमा हो रहा है, तो वे जिस भी लिंक पर क्लिक करेंगे, वह सर्वर पर फिर से आ जाएगा, जो फिर से ऊपर के रूप में हल हो गया है।
ग्राहक
यह client.jsप्रतिक्रिया-राउटर के साथ एक न्यूनतम है (समान मार्गों को फिर से उपयोग करते हुए):
var React = require('react')
var Router = require('react-router')
var routes = require('./routes')
Router.run(routes, Router.HistoryLocation, function(Handler, state) {
React.render(<Handler/>, document.body)
})
जब आप कॉल करते हैं Router.run(), तो यह पर्दे के पीछे आपके लिए एक राउटर इंस्टेंस बनाता है, जो हर बार जब आप ऐप के चारों ओर नेविगेट करते हैं, तो जैसा कि URL क्लाइंट पर गतिशील हो सकता है, जैसा कि सर्वर पर विरोध किया जाता है, जहां एक एकल अनुरोध है निश्चित URL।
इस मामले में, हम उपयोग कर रहे हैं HistoryLocation, जो Historyएपीआई का उपयोग करता है यह सुनिश्चित करने के लिए कि जब आप पीछे / आगे बटन दबाते हैं तो सही काम होता है। वहाँ भी है HashLocationजो hashइतिहास प्रविष्टियाँ बनाने के लिए URL बदलता है और window.onhashchangeनेविगेशन को ट्रिगर करने के लिए घटना सुनता है ।
जब आप प्रतिक्रिया-राउटर के <Link>घटक का उपयोग करते हैं, तो आप इसे एक toप्रोप देते हैं जो मार्ग का नाम है, साथ ही किसी भी मार्ग paramsऔर queryडेटा की जरूरत है। <a>इस घटक द्वारा प्रदान की गई एक है onClickहैंडलर जो अंततः कॉल router.transitionTo()रंगमंच की सामग्री आप लिंक है, जो इस तरह दिखता है दे दी है साथ रूटर उदाहरण पर:
/**
* Transitions to the URL specified in the arguments by pushing
* a new URL onto the history stack.
*/
transitionTo: function (to, params, query) {
var path = this.makePath(to, params, query);
if (pendingTransition) {
// Replace so pending location does not stay in history.
location.replace(path);
} else {
location.push(path);
}
},
एक नियमित लिंक के लिए यह अंततः location.push()आपके द्वारा उपयोग किए जा रहे स्थान प्रकार पर कॉल करता है, जो इतिहास को स्थापित करने के विवरण को संभालता है इसलिए पीछे और आगे के बटन के साथ नेविगेट करना काम करेगा, फिर कॉल करता है router.handleLocationChange()कि राउटर को यह बताएं कि यह संक्रमण के साथ आगे बढ़ सकता है नया URL पथ।
राउटर तब router.dispatch()नए URL के साथ अपनी खुद की विधि कहता है , जो यह निर्धारित करने के विवरण को संभालता है कि कौन से कॉन्फ़िगर किए गए मार्ग URL से मेल खाते हैं, फिर मिलान किए गए मार्गों के लिए मौजूद किसी भी संक्रमण हुक को कॉल करता है । जब आपके रूट को आपकी पसंद की चीजें नहीं मिल रही हों, तो संक्रमण को खत्म करने की क्षमता के साथ, जब आप रूट को नेविगेट या नेविगेट करने वाले हों, तो कुछ कार्रवाई करने के लिए आप अपने किसी भी मार्ग संचालकों पर इन संक्रमण हुक को लागू कर सकते हैं।
यदि संक्रमण को समाप्त नहीं किया गया था, तो अंतिम चरण उस कॉलबैक को कॉल करना है जो आपने Router.run()शीर्ष-स्तरीय हैंडलर घटक और राज्य ऑब्जेक्ट के साथ URL और मिलान किए गए मार्गों के विवरण के साथ दिया था। शीर्ष-स्तरीय हैंडलर घटक वास्तव में Routerस्वयं उदाहरण है, जो शीर्ष-सबसे रूट हैंडलर का मिलान करता है जो मिलान किया गया था।
जब आप क्लाइंट पर एक नए URL पर जाते हैं, तो उपरोक्त प्रक्रिया को फिर से चलाया जाता है।
उदाहरण परियोजनाओं