React Router না ব্যবহার করেই Routing সিস্টেম বানানোর অভিজ্ঞতা!

সাম্প্রতিক সময়ে আমি একটা Portfolio Website বানানোর সময় ভিন্ন কিছু করার চেষ্টা করেছিলাম। সাধারণত আমরা React Router ব্যবহার করি, কিন্তু আমি ভাবলাম, React Router ব্যবহার না করে যদি নিজেই রাউটিং সিস্টেম বানাই তাহলে কেমন হয়?

এই জিনিসটা করতে গিয়ে আমি কয়েকটা কনসেপ্ট সম্পর্কে জেনেছি, সেইগুলো হল:

• 🔹 Reload ছাড়া Routing:
  
  প্রথমে আমি window.location.href ব্যবহার করেছিলাম, কিন্তু এতে সমস্যা হলো - পুরো পেজ রিলোড হয়ে যাচ্ছিল। কিন্তু React Router এর SPA (Single Page Application) গুলাতে আমরা কোনো রিলোড ছাড়া এক পেজ থেকে অন্য পেজে যেতে পারি!
  
  👉 সমাধান: window.history.pushState

window.history.pushState({}, "", path);
  
  এটা ব্যবহার করলে URL পরিবর্তন হবে ঠিকই, কিন্তু পেজে কোনো রিলোড নিবে না, ঠিক React Router এর মতো।
• 
  
  🔹 Back/Forward Navigation Handling:
  
  Browser এর back/forward বাটন কাজ করার জন্য আমি popstate ইভেন্ট হ্যান্ডেল করলাম:
  
  

          
  useEffect(() => {
    const handlePop = () => setCurrentPath(window.location.pathname);
    window.addEventListener("popstate", handlePop);
    return () => window.removeEventListener("popstate", handlePop);
  }, []);
          
        

  
  
  
• 🔹 Dynamic Route:
  
  Services page থেকে Pricing page যেতে আমার দরকার হলো dynamic route (যেমন /pricing/:id)।
  dynamic route বের করার জন্য প্রথমে আমি window.location.pathname দিয়ে কোন path এ আছি তা বের করে নিলাম। তারপর currentPath.startsWith("/pricing/") দিয়ে চেক করলাম রাউটটা কি /pricing/ দিয়ে শুরু হয়েছে কিনা। যদি হয়, তাহলে currentPath.split("/")[2] দিয়ে serviceId টা পেয়ে গেলাম।
  
  

          
  if (currentPath.startsWith("/pricing/")) {
    const serviceId = currentPath.split("/")[2];
    return <PricingPage serviceId={serviceId} />;
  }
          
        

  
  
  এভাবে serviceId ধরে আমি নির্দিষ্ট সার্ভিসের Pricing দেখাতে পেরেছি।
  
  
• 🔹 Reload ছাড়া Navigation:
  
  আমরা যখন <a href> ট্যাগ ব্যবহার করি, তখন এক page থেকে অন্য page এ যেতে রিলোড নেয়, কিন্তু React Router এর Link ব্যবহার করলে রিলোড ছাড়া এক page থেকে অন্য page এ যাওয়া যায়।
  
  👉 সমাধান: <a href> সরাসরি ব্যবহার না করে আমি click ইভেন্ট আটকিয়ে কাস্টম ফাংশন চালালাম:
  
  

          
  <a
    href="/about"
    onClick={(e) => {
      e.preventDefault();
      onPageChange("/about");
    }}
  >
    MORE ABOUT ME
  </a>
          
        

  
  
  

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