দ্রষ্টব্য, এই উত্তরটিতে প্রতিক্রিয়া রাউটার সংস্করণ 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আগত ইউআরএলটিকে তার স্থিতিশীল অবস্থান হিসাবে কনফিগার করা একক-ব্যবহারের উদাহরণ তৈরি করেন যা উপযুক্ত ম্যাচযুক্ত রুটগুলি সেট করার জন্য রুটের গাছের বিরুদ্ধে সমাধান করা হয়, শীর্ষ স্তরের সাথে ফিরে কল করে রুট হ্যান্ডলারটি উপস্থাপন করতে হবে এবং প্রতিটি স্তরে কোন শিশু রুটের সাথে মিল রয়েছে তার একটি রেকর্ড। যখন আপনি <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 টি ক্লায়েন্টের উপর গতিশীল হতে পারে opposed স্থির ইউআরএল।
এই ক্ষেত্রে, আমরা পিছনে / ফরোয়ার্ড বোতামটি চাপলে সঠিক জিনিস ঘটে তা নিশ্চিত করতে APIHistoryLocation ব্যবহার করে যা আমরা ব্যবহার করছি Historyuses এখানে একটা ব্যাপার HashLocationযা URL টি পরিবর্তন hashকরতে ইতিহাস এন্ট্রি এবং শোনা করার 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()রাউটারকে জানাতে এটি পুনরায় স্থানান্তরিত হওয়ার সাথে এগিয়ে যেতে পারে calls নতুন ইউআরএল পাথ।
রাউটারটি তারপরে router.dispatch()নতুন ইউআরএল এর সাথে নিজস্ব পদ্ধতি কল করে , যা কনফিগার করা রুটগুলির মধ্যে কোনটি ইউআরএলের সাথে মিলে যায় তা নির্ধারণের বিশদ পরিচালনা করে, তারপরে ম্যাচযুক্ত রুটের জন্য উপস্থিত কোনও রূপান্তর হুককে কল করে। কোনও রুট যখন নেভিগেট করা হবে বা নেভিগেট করা হবে তখন কিছু ব্যবস্থা নেওয়ার জন্য আপনি আপনার যেকোন রুট হ্যান্ডলারের উপর এই রূপান্তর হুক প্রয়োগ করতে পারেন, যদি জিনিসগুলি আপনার পছন্দ মতো না হয় তবে ট্রানজিশনটি বাতিল করতে হবে।
যদি ট্রানজিশনটি বাতিল করা না হয় তবে চূড়ান্ত পদক্ষেপটি হ'ল Router.run()শীর্ষস্থানীয় হ্যান্ডলার উপাদান এবং ইউআরএল এবং ম্যাচযুক্ত রুটের সমস্ত বিবরণ সহ একটি রাষ্ট্রের সাথে আপনি যে কলব্যাকটি দিয়েছিলেন তা কল করা call শীর্ষ-স্তরের হ্যান্ডলার উপাদানটি প্রকৃতপক্ষে Routerনিজেই উদাহরণস্বরূপ, যা সর্বাধিক সর্বাধিক রুট হ্যান্ডলারের সাথে মিলিত হয় nd
উপরের প্রক্রিয়াটি প্রতিবার ক্লায়েন্টের নতুন URL এ নেভিগেট করার সময় পুনরায় চালানো হবে।
উদাহরণ প্রকল্প