হ্যাশরউটার বনাম ব্রাউজাররউটার

Question

আমি প্রোগ্রামিংয়ে নতুন যা যা আমার কাছে অফিশিয়াল ডকসটি পড়লে তা বুঝতে আমার পক্ষে কিছুটা অসুবিধা হয়।

আমি এখান থেকে প্রতিক্রিয়া রাউটার 4 সম্পর্কে পড়ছিলাম

এই নিবন্ধে, লেখক <HashRouter>এবং সম্পর্কে কথা বলছিলেন<BrowserRouter>

এটাই তিনি উল্লেখ করেছিলেন

হ্যাশরউটারটি মূলত উপাদানটি রেন্ডার করতে URL এ হ্যাশ ব্যবহার করে। যেহেতু আমি একটি স্থির এক পৃষ্ঠার ওয়েবসাইট তৈরি করছিলাম তাই আমার এটি ব্যবহার করা দরকার।

ব্রাউজাররউটার , উপাদানটি রেন্ডার করতে এটি HTML5 ইতিহাস এপিআই ব্যবহার করে। ইতিহাসটি পুশস্টেট এবং রিপ্লেসমেটের মাধ্যমে সংশোধন করা যেতে পারে। আরো তথ্য পাওয়া যাবে এখানে

এখন, আমি তাত্পর্যটি পাই না এবং উভয়ের ক্ষেত্রেই কেস ব্যবহার করি না, যেমন তিনি যখন বলেছিলেন ইতিহাস পুশস্টেট এবং রিপ্লেসস্টেটের মাধ্যমে সংশোধন করা যেতে পারে এবং এটি ইউআরএলটিতে হ্যাশটিকে উপাদানটি রেন্ডার করতে ব্যবহার করে

ব্রাউজাররউটারের প্রথম ব্যাখ্যাটি যদিও আমার কাছে সম্পূর্ণ অস্পষ্ট, তবে হ্যাশরউটার সম্পর্কে দ্বিতীয় ব্যাখ্যাটিও অর্থবোধ করে না, যেমন কোনও অংশটি রেন্ডার করার জন্য কেন কেউ ইউআরএলে হ্যাশ (#) ব্যবহার করবে?

Comments

বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

আপনি বিদ্যমান উত্তরের জন্য প্রতিক্রিয়া সরবরাহ করেন নি। যেহেতু তারা ইতিমধ্যে সরাসরি প্রশ্নের উত্তর দিয়েছে, তাই প্রশ্নটি কী ধরণের মনোযোগের প্রয়োজন তা পরিষ্কার করা সার্থক হবে।

— এস্তাস ফ্লাস্ক

Answer 1

BrowserRouter

এটি ইতিহাসের এপিআই ব্যবহার করে , অর্থাৎ এটি উত্তরাধিকারী ব্রাউজারগুলির জন্য উপলব্ধ নয় (আই 9 এবং নিম্ন এবং সমসাময়িক)। ক্লায়েন্ট-সাইড প্রতিক্রিয়া অ্যাপ্লিকেশানের মত পরিষ্কার যাত্রাপথ বজায় রাখতে সক্ষম হয় example.com/react/route কিন্তু ওয়েব সার্ভার দ্বারা সমর্থিত করা প্রয়োজন। সাধারণত এর অর্থ এই যে ওয়েব সার্ভারে একক পৃষ্ঠার অ্যাপ্লিকেশনের জন্য কনফিগার করা উচিত, অর্থাত্ একই index.htmlপরিবেশিত হয় জন্য / প্রতিক্রিয়া / রুট পাথ অথবা সার্ভার প্রান্তের অন্য কোন রুট। ক্লায়েন্ট দিকে, window.location.pathnameপ্রতিক্রিয়া রাউটার দ্বারা পার্স করা হয়। প্রতিক্রিয়া রাউটার এমন একটি উপাদানকে রেন্ডার করে যা এটি / প্রতিক্রিয়া / রুটের জন্য রেন্ডার করার জন্য কনফিগার করা হয়েছিল ।

অতিরিক্তভাবে, সেটআপটিতে সার্ভার-সাইড রেন্ডারিং জড়িত index.htmlথাকতে পারে, রেন্ডারযুক্ত উপাদান বা ডেটা থাকতে পারে যা বর্তমান রুটের সাথে নির্দিষ্ট।

HashRouter

এটি ইউআরএল হ্যাশ ব্যবহার করে, এটি সমর্থিত ব্রাউজারগুলি বা ওয়েব সার্ভারে কোনও সীমাবদ্ধতা রাখে না। সার্ভার-সাইড রুটিং ক্লায়েন্ট-সাইড রাউটিং থেকে স্বতন্ত্র।

পশ্চাদপদ-সামঞ্জস্যপূর্ণ একক পৃষ্ঠার অ্যাপ্লিকেশনটি এটি উদাহরণস্বরূপ ব্যবহার করতে পারে / ডটকম / পুনঃটুইট / ক্রাউট । সার্ভার-সাইড রেন্ডারিং দ্বারা সেটআপটিকে ব্যাক আপ করা যায় না কারণ এটি / পাথ যা সার্ভারের পাশে পরিবেশিত হয়, # / প্রতিক্রিয়া / রুট ইউআরএল হ্যাশ সার্ভার পাশ থেকে পড়া যায় না। ক্লায়েন্ট দিকে, window.location.hashপ্রতিক্রিয়া রাউটার দ্বারা পার্স করা হয়। প্রতিক্রিয়া রাউটার এমন একটি উপাদানকে রেন্ডার করে যা এটি অনুরূপভাবে / প্রতিক্রিয়া / রুটের জন্য রেন্ডার করার জন্য কনফিগার করা হয়েছিল BrowserRouter।

সর্বাধিক গুরুত্বপূর্ণ, HashRouterব্যবহারের মামলাগুলি এসপিএ-তে সীমাবদ্ধ নয়। একটি ওয়েবসাইট যখন প্রতিক্রিয়া অ্যাপ্লিকেশনটি একটি উইজেট যে ভালো URL- এ তার রাষ্ট্র বজায় রাখে হতে পারে উত্তরাধিকার আছে বা সার্চ ইঞ্জিনে বান্ধব সার্ভার সাইড রাউটিং পারে, example.com/server/side/route#/react/route । কিছু পৃষ্ঠা যা প্রতিক্রিয়া প্রয়োগ করে সেগুলিকে / সার্ভার / সাইড / রুটের জন্য সার্ভার সাইডে পরিবেশন করা হয় , তারপরে ক্লায়েন্ট সাইডে রিঅ্যাক্ট রাউটার এমন একটি উপাদান সরবরাহ করে যা এটি পূর্ববর্তী দৃশ্যের মতো একইভাবে / প্রতিক্রিয়া / রুটের জন্য রেন্ডার করার জন্য কনফিগার করা হয়েছিল ।

Comments

আরেকটি বিষয় - আপনার যদি পৃষ্ঠায় অ্যাঙ্কার নেভিগেশন প্রয়োজন হয় (যা লোকেশন ha

— হোয়াইটকাটায়

@ আইরোহিতভাটিয়া ব্রাউজারহিসটরিও আপনাকে সার্ভার-সাইড রেন্ডার করতে দেয় কারণ সার্ভারের সম্পূর্ণ URL- এ অ্যাক্সেস রয়েছে। সার্ভারের পিছনে পথে অ্যাক্সেস নেই #।

— সাবস্টিয়ান লোইক্স

Answer 2

সার্ভার সাইড: হ্যাশরউটার ইউআরএলটিতে একটি হ্যাশ প্রতীক ব্যবহার করে, যার ফলে সার্ভারের অনুরোধে পরবর্তী সমস্ত ইউআরএল পাথের বিষয়বস্তু উপেক্ষা করা হবে (যেমন আপনি "www.mywebsite.com/#/Press/john" প্রেরণ করুন সার্ভারটি "www" পেয়েছে .mywebsite.com "। ফলস্বরূপ সার্ভারটি পূর্ব # ইউআরএল প্রতিক্রিয়া ফিরিয়ে দেবে এবং তারপরে পোস্ট # পাথটি আপনার ক্লায়েন্টের পার্শ্ব প্রতিক্রিয়া অ্যাপ্লিকেশন দ্বারা পার্স করে পরিচালনা করা হবে।

ক্লায়েন্ট পাশ : ব্রাউজাররউটার আপনার ইউআরএলে # চিহ্নটি যুক্ত করবে না, তবে আপনি যখন কোনও পৃষ্ঠায় লিঙ্ক দেওয়ার বা কোনও পৃষ্ঠা পুনরায় লোড করার চেষ্টা করবেন তখন সমস্যা তৈরি হবে। যদি স্পষ্টভাবে রুটটি আপনার ক্লায়েন্টের প্রতিক্রিয়ার অ্যাপ্লিকেশনটিতে উপস্থিত থাকে তবে এটি আপনার সার্ভারে নেই, পুনরায় লোডিং এবং লিঙ্কিং (যে কোনও কিছু যা সরাসরি সার্ভারে আঘাত করে) 4040 টি পাওয়া যায়নি তত্ক্ষতুল্যে ফিরে আসবে।

Answer 3

উভয় BrowserRouterএবং HashRouterউপাদানগুলি Routerক্লাসের সাবক্লাস হিসাবে প্রতিক্রিয়া রাউটার ভার্চ 4 এ চালু হয়েছিল । সহজভাবে, BrowserRouterআপনার ব্রাউজারে বর্তমান ইউআরএল সাথে ইউআই সিঙ্ক করে এটি এটি এইচটিএমএল -5 ইতিহাস এপিআই এর মাধ্যমে সম্পন্ন হয়। অন্যদিকে, HashRouterসিঙ্ক করার জন্য আপনার URL এর হ্যাশ অংশটি ব্যবহার করে।

Answer 4

"ব্যবহারের ক্ষেত্রে"

হ্যাশরৌটার: যখন আমাদের ছোট ক্লায়েন্টের সাইড অ্যাপ্লিকেশন থাকে যা ব্যাকএন্ডের প্রয়োজন হয় না HashRouterতখন আমরা ব্যবহার করতে পারি কারণ যখন আমরা ইউআরএল / লোকেশন বার ব্রাউজারে হ্যাশ ব্যবহার করি তখন কোনও সার্ভার অনুরোধ করে না।

ব্রাউজাররউটার: যখন আমাদের বড় উত্পাদন-প্রস্তুত অ্যাপ্লিকেশন থাকে যা ব্যাকএন্ড পরিবেশন করে, এটি ব্যবহার করার পরামর্শ দেওয়া হয় <BrowserRouter>।

বই দ্বারা রেফারেন্স: শেখার প্রতিক্রিয়া: অ্যালেক্স ব্যাংক, ইভ পোরসেলো দ্বারা প্রতিক্রিয়া এবং Redux সহ কার্যকরী ওয়েব বিকাশ

Comments

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

— পাভেল সাস

Answer 5

পৃষ্ঠাটি রিফ্রেশ করার ফলে ব্রাউজারটি বর্তমান রুটটি ব্যবহার করে সার্ভারে একটি জিইটি অনুরোধ প্রেরণ করবে। এই জিইটি অনুরোধটি প্রেরণ করা থেকে বিরত রাখতে # টি ব্যবহৃত হয়েছিল। আমরা ব্রাউজাররউটারটি ব্যবহার করি কারণ আমরা জিইটি অনুরোধটি সার্ভারে প্রেরণ করতে চাই। সার্ভারে রাউটারটি রেন্ডার করতে আমাদের একটি অবস্থান প্রয়োজন - আমাদের রুটটি দরকার। এই রুটটি সার্ভারে রাউটারকে কী রেন্ডার করতে হবে তা জানাতে ব্যবহৃত হবে। ব্রাউজাররউটারটি যখন আপনি বিচ্ছিন্নভাবে রুটগুলি রেন্ডার করতে চান তখন ব্যবহৃত হয়।

Answer 6

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

তবে যখন আমরা অ্যাপাচি সার্ভারে আমাদের বিল্ড রিএক্ট অ্যাপটি স্থাপন করি (কেবল পিএইচপি বলি, GoDaddy তে), তখন রাউটিংটি আশানুরূপভাবে কাজ করবে না। এটি 404 এ অবতরণ করবে, এর জন্য আমাদের .htaccess ফাইল কনফিগার করতে হবে। এর পরেও আমার জন্য প্রতিটি ক্লিক / ইউআরএল, এটি সার্ভারে অনুরোধ প্রেরণ করে।

সেক্ষেত্রে আরও ভাল আমরা হ্যাশ রাউটিং (#) ব্যবহার করি। # আমরা এটি এইচটিএমএল পৃষ্ঠায় ব্যবহার করি, এইচটিএমএল বিষয়বস্তুতে প্রবেশের জন্য এবং এটি সার্ভারের অনুরোধের দিকে পরিচালিত করে না।

উপরের দৃশ্যে আমরা হ্যাশআউটিং ব্যবহার করতে পারি, এটি # এর পরে উপস্থিত সমস্ত ইউআরএল, আমরা এসপিএ হিসাবে কাজ করার জন্য আমাদের রাউটিং বিধিগুলি রাখতে পারি।

Answer 7

মূলত যদি কেউ ব্রাউজাররউটার ব্যবহার করে তবে একটি "soAndSoReactPage /: id" এর মতো ইউআরএল ব্যবহার করতে পারে

যেমন:

with a Route <Route path="soAndSoReactPage/:id"><soAndSoReactComponent/></Route>

এখন, প্রতিক্রিয়া উপাদান "soAndSoReactComponent" "আইডি" এরপরে ইউজারপ্যারাম ব্যবহার করে বের করা যাবে এবং এইভাবে আপনি "soAndSoReactComp घटक" পৃষ্ঠাটি আইডি অনুসারে প্রদর্শন করতে পারবেন

এই জাতীয় জিনিস হ্যাশডরটার দিয়ে করা যায় না,