ক্লায়েন্ট সাইড রাউটিং ইন React Router

এই পাঠে আমরা সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA)-এর একটি গুরুত্বপূর্ণ উপাদান নিয়ে আলোচনা করব - ক্লায়েন্ট সাইড রাউটিং। এই ধরনের রাউটিং আমাদের সার্ভার থেকে ডকুমেন্টের অতিরিক্ত অনুরোধ ছাড়াই ব্রাউজারে URL আপডেট করতে দেয়।

আমরা গত পাঠে তৈরি করা অ্যাপ্লিকেশনটি চালু করি। ডেভেলপার প্যানেল খুলুন এবং সেখানে 'নেটওয়ার্ক' ট্যাবটি খুলুন (Chrome-এর জন্য Network)। আমাদের লিঙ্কে প্রতিটি ক্লিকের পরে আমরা প্রতিবার document-এর জন্য একটি অনুরোধ দেখি। অর্থাৎ আমরা প্রতিবার সার্ভারকে আমাদের জন্য document লোড করতে বলি।

আসুন এখন React Router-এর সুবিধাগুলি ব্যবহার করি এই ধরনের অনুরোধ থেকে মুক্তি পেতে। এটি করতে, আমাদের অ্যাপ্লিকেশনের root.jsx ফাইলটি খুলুন এবং a ট্যাগ Link কম্পোনেন্ট দিয়ে প্রতিস্থাপন করুন। প্রথমে এটির ইম্পোর্ট যোগ করুন:

routes/root.jsximport { Outlet, Link } from 'react-router-dom';

এখন a ট্যাগগুলি href অ্যাট্রিবিউট সহ প্রতিস্থাপন করুন। কোডের এই অংশটির পরিবর্তে:

routes/root.jsx<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

আমাদের এখন নিম্নলিখিত কোড থাকবে:

routes/root.jsx<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

আবার ডেভেলপার প্যানেলে 'নেটওয়ার্ক' ট্যাবটি খুলুন, অ্যাড্রেস বারে রুট পাথ সেট করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন। এখন লিঙ্কগুলিতে ক্লিক করুন এবং দেখুন যে আমাদের document শুধুমাত্র একবার অনুরোধ করা হয়েছিল প্রাথমিক লোডে এবং পরবর্তী ক্লিকগুলিতে সার্ভারে আর কোনও অনুরোধ নেই।