RIOT.js এর Router ব্যবস্থাপনা

Riot.js-এ Router ব্যবস্থাপনা ব্যবহার করে, আপনি একাধিক পৃষ্ঠা বা ভিউ তৈরি করতে পারেন এবং URL পরিবর্তনের ভিত্তিতে কম্পোনেন্ট রেন্ডার করতে পারেন। Riot.js নিজে একটি নির্দিষ্ট রাউটিং ব্যবস্থা সরবরাহ করে না, তবে আপনি Riot-router বা অন্য কোনও রাউটিং লাইব্রেরি ব্যবহার করে এটি বাস্তবায়ন করতে পারেন।

এখানে Riot.js-এ Router ব্যবস্থাপনা কিভাবে করতে হয়, তা সম্পর্কে একটি নির্দেশিকা দেওয়া হল।

১. Riot.js এ Routing সিস্টেম সেটআপ করা

Riot-router লাইব্রেরি Riot.js এর জন্য একটি রাউটিং প্যাকেজ, যা URL পরিবর্তন অনুযায়ী বিভিন্ন কম্পোনেন্ট রেন্ডার করার জন্য ব্যবহার করা হয়। আপনি এটি ইনস্টল করে এবং কনফিগার করে রাউটিং বাস্তবায়ন করতে পারেন।

১.১ Riot-router ইনস্টল করা

প্রথমে, আপনার প্রজেক্টে riot-router লাইব্রেরি ইনস্টল করতে হবে:

npm install riot-router

এছাড়া, আপনি যদি CDN ব্যবহার করতে চান, তবে এটি ব্যবহার করতে পারেন:

<script src="https://cdn.jsdelivr.net/npm/riot-router@2.0.0/dist/riot-router.min.js"></script>

১.২ Basic Routing Setup

এখন, আমরা একটি সাধারণ রাউটিং সিস্টেম সেটআপ করব যা কিছু ভিউ বা পৃষ্ঠাকে URL এর মাধ্যমে রেন্ডার করবে।

২. উদাহরণ: Riot.js Router ব্যবস্থাপনা

ধরা যাক, আপনার দুটি কম্পোনেন্ট আছে: Home এবং About। আপনি যখন / রুটে যাবেন, তখন Home কম্পোনেন্টটি রেন্ডার হবে এবং /about রুটে গেলে About কম্পোনেন্টটি রেন্ডার হবে।

২.১ App.riot (Parent Component)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js Routing</h1>

  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>

  <router-view></router-view> <!-- Riot-router will render the matching component here -->

  <script>
    import { router } from 'riot-router';
    import Home from './Home.riot';
    import About from './About.riot';

    export default {
      onMounted() {
        // Define routes for the app
        router.route('/', Home);
        router.route('/about', About);
      }
    }
  </script>
</app>

২.২ Home.riot (Home Component)

<!-- src/components/Home.riot -->
<home>
  <h2>Home Page</h2>
  <p>Welcome to the home page!</p>

  <script>
    export default {}
  </script>
</home>

২.৩ About.riot (About Component)

<!-- src/components/About.riot -->
<about>
  <h2>About Page</h2>
  <p>This is the about page.</p>

  <script>
    export default {}
  </script>
</about>

৩. কী হচ্ছে এখানে?

1. Router Setup: App.riot কম্পোনেন্টে আমরা router.route() ফাংশন ব্যবহার করছি। এটি URL এর সাথে মিলে যাওয়ার ভিত্তিতে কম্পোনেন্ট রেন্ডার করতে সক্ষম।
   • / রুটে গেলে Home কম্পোনেন্টটি রেন্ডার হবে।
   • /about রুটে গেলে About কম্পোনেন্টটি রেন্ডার হবে।
2. router-view: এটি একটি প্লেসহোল্ডের মতো কাজ করে যেখানে রাউটারের সাথে মিলে যাওয়া কম্পোনেন্টটি রেন্ডার হবে।
3. Navigation: নেভিগেশন লিঙ্কগুলির মাধ্যমে আপনি বিভিন্ন রুটে যেতে পারবেন।

৪. History Mode ব্যবহার করা

এটা ডিফল্টভাবে hash (যেমন: /#/about) ব্যবহারের মাধ্যমে রাউটিং করে, কিন্তু আপনি যদি History API ব্যবহার করতে চান (যেমন http://yourdomain.com/about), তাহলে আপনাকে একটু কনফিগারেশন করতে হবে।

router.mode = 'history'; // Using HTML5 History API

এটি App.riot কম্পোনেন্টের মধ্যে কল করতে হবে, যাতে আপনি আধুনিক ব্রাউজার রাউটিং পদ্ধতি ব্যবহার করতে পারেন।

৫. Dynamic Routes (Dynamic Parameters)

আপনি dynamic routes বা parameterized routes ব্যবহার করে আরও জটিল রাউটিং করতে পারেন। যেমন, /user/:id রুটে গেলে ডাইনামিকভাবে id প্যারামিটার দিয়ে কম্পোনেন্ট রেন্ডার হবে।

উদাহরণ:

<!-- src/components/User.riot -->
<user>
  <h2>User Profile</h2>
  <p>User ID: {opts.id}</p>

  <script>
    export default {}
  </script>
</user>

App.riot:

<!-- src/components/App.riot -->
<app>
  <nav>
    <a href="/user/123">User 123</a>
    <a href="/user/456">User 456</a>
  </nav>

  <router-view></router-view>

  <script>
    import { router } from 'riot-router';
    import User from './User.riot';

    export default {
      onMounted() {
        // Define dynamic route with parameter
        router.route('/user/:id', User);
      }
    }
  </script>
</app>

এখানে, User কম্পোনেন্টে opts.id ব্যবহার করে আমরা id প্যারামিটারটি অ্যাক্সেস করতে পারি।

সারাংশ

Riot.js-এ রাউটিং ব্যবস্থাপনা করার জন্য আপনি riot-router ব্যবহার করতে পারেন। এটি আপনাকে বিভিন্ন URL এর জন্য ভিন্ন ভিন্ন কম্পোনেন্ট রেন্ডার করতে সাহায্য করে। আপনি static routes, dynamic routes, এবং history mode-এর মতো ফিচার ব্যবহার করতে পারেন।

এটি একটি সহজ এবং কার্যকর উপায় রাউটিং ব্যবস্থাপনা করার জন্য, যা বিশেষ করে ছোট বা মাঝারি আকারের অ্যাপ্লিকেশনের জন্য উপযুক্ত।

Routing হল এমন একটি প্রক্রিয়া যার মাধ্যমে আপনি বিভিন্ন URL অথবা পেজের জন্য নির্দিষ্ট কম্পোনেন্টগুলি রেন্ডার করতে পারেন। এটি একটি Single Page Application (SPA) তৈরি করতে সাহায্য করে, যেখানে আপনি এক পৃষ্ঠাতেই ডাইনামিক পেজ রেন্ডারিং করতে পারেন এবং পুরো পেজটি রিফ্রেশ না করেই কন্টেন্ট আপডেট করতে পারেন।

Riot.js-এ routing সাধারণত URL-এর ভিত্তিতে নির্দিষ্ট কম্পোনেন্ট মাউন্ট করার জন্য ব্যবহৃত হয়।

Routing এর প্রয়োজনীয়তা:

1. Single Page Application (SPA):
   • Routing ব্যবহার করে আপনি এক পৃষ্ঠায় একাধিক ভিউ (পেজ) তৈরি করতে পারেন। পুরো পেজ রিফ্রেশ না করেই ইউজারের জন্য বিভিন্ন কন্টেন্ট প্রদর্শন করতে পারবেন। এটি দ্রুত এবং স্মুথ ইউজার এক্সপেরিয়েন্স প্রদান করে।
2. URL-based Navigation:
   • Routing ব্যবহার করে আপনি URL পরিবর্তন করলেই নির্দিষ্ট কন্টেন্ট দেখতে পারবেন, যেমন /home, /about, /contact ইত্যাদি। এটি ওয়েব অ্যাপ্লিকেশনের জন্য খুবই প্রয়োজনীয়, কারণ ইউজাররা URL পরিবর্তন করলে সেই অনুযায়ী কন্টেন্ট দেখতে চান।
3. Dynamic Content Loading:
   • Routing দ্বারা আপনি URL অনুযায়ী ডাইনামিক কন্টেন্ট লোড করতে পারেন। এর মাধ্যমে অ্যাপ্লিকেশনটি আরও ইন্টারেক্টিভ এবং কাস্টমাইজড হয়ে ওঠে।
4. Better User Experience (UX):
   • Routing এর মাধ্যমে ইউজাররা দ্রুত এবং সহজভাবে বিভিন্ন পেজের মধ্যে নেভিগেট করতে পারেন, যা পেজ রিফ্রেশের জন্য সময় নষ্ট হওয়ার থেকে बचায়।
5. SEO-friendly URL:
   • URL এর ভিত্তিতে বিভিন্ন পেজের জন্য কন্টেন্ট রেন্ডার করার ফলে, প্রতিটি পেজের জন্য আলাদা URL থাকবে, যা সার্চ ইঞ্জিন অপটিমাইজেশন (SEO) এর জন্য উপকারী।

Riot.js এ Routing এর ব্যবহার:

Riot.js নিজে থেকে কোনো বিল্ট-ইন রাউটার সরবরাহ করে না, তবে আপনি সাধারণ JavaScript রাউটিং লাইব্রেরি যেমন Page.js অথবা Riot-router ব্যবহার করতে পারেন। এই লাইব্রেরিগুলি আপনাকে URL-এর ভিত্তিতে কম্পোনেন্ট রেন্ডার করতে সাহায্য করে।

উদাহরণ ১: Riot.js এবং Page.js দিয়ে Routing

এখানে আমরা Page.js রাউটিং লাইব্রেরি ব্যবহার করে Riot.js-এ রাউটিং কনফিগার করব।

প্রথমে, Page.js ইনস্টল করুন:

npm install page

এখন, Riot.js এ রাউটিং কনফিগার করুন:

<!-- App.riot -->
<app>
  <h1>Welcome to My Riot.js App</h1>
  
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>

  <div id="content"></div>

  <script>
    import page from 'page';

    const Home = () => {
      document.getElementById('content').innerHTML = '<h2>Home Page</h2>';
    };

    const About = () => {
      document.getElementById('content').innerHTML = '<h2>About Page</h2>';
    };

    const Contact = () => {
      document.getElementById('content').innerHTML = '<h2>Contact Page</h2>';
    };

    page('/', Home);        // When the URL is "/" (home), show the Home page.
    page('/about', About);  // When the URL is "/about", show the About page.
    page('/contact', Contact);  // When the URL is "/contact", show the Contact page.

    page.start();  // Initialize the routing.
  </script>
</app>

ব্যাখ্যা:

• Page.js রাউটিং লাইব্রেরি ব্যবহার করে /, /about, /contact রাউটগুলির জন্য কনটেন্ট রেন্ডার করা হয়েছে।
• প্রতিটি রাউটের জন্য একটি কনটেন্ট তৈরি করা হয়েছে এবং সেগুলিকে page() ফাংশনের মাধ্যমে কনফিগার করা হয়েছে।
• page.start() কল করা হয়েছে যাতে রাউটিং কার্যকরী হয় এবং ইউজার URL পরিবর্তন করলে সংশ্লিষ্ট পেজটি দেখানো হয়।

উদাহরণ ২: Riot.js এবং Riot-router দিয়ে Routing

আরেকটি জনপ্রিয় রাউটিং লাইব্রেরি হল Riot-router। এটি Riot.js এর জন্য ডিজাইন করা হয়েছে এবং এটি খুব সহজে Riot কম্পোনেন্টের জন্য রাউটিং সাপোর্ট প্রদান করে।

প্রথমে Riot-router ইনস্টল করুন:

npm install riot-router

এখন, Riot-router ব্যবহার করুন:

<!-- App.riot -->
<app>
  <h1>Riot.js with Riot-router Example</h1>
  
  <nav>
    <a href="/home">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>

  <div id="content"></div>

  <script>
    import { Router } from 'riot-router';

    const Home = () => {
      return '<h2>Home Page</h2>';
    };

    const About = () => {
      return '<h2>About Page</h2>';
    };

    const Contact = () => {
      return '<h2>Contact Page</h2>';
    };

    const router = new Router();
    
    router.add('/home', Home);
    router.add('/about', About);
    router.add('/contact', Contact);

    router.start();  // Start the router
  </script>
</app>

ব্যাখ্যা:

• Riot-router ব্যবহার করে /home, /about, /contact রাউটগুলির জন্য কম্পোনেন্টগুলির মধ্যে কনটেন্ট পরিবর্তন করা হচ্ছে।
• Router.add() ফাংশন ব্যবহার করে রাউট যুক্ত করা হয়েছে এবং router.start() রাউটিং কার্যকর করতে ব্যবহৃত হয়েছে।

Routing Riot.js এ খুবই গুরুত্বপূর্ণ, বিশেষ করে যখন আপনি Single Page Applications (SPA) তৈরি করছেন। এটি ব্যবহারকারীদের জন্য সোজা এবং স্মুথ নেভিগেশন নিশ্চিত করে, এবং আপনাকে URL এর ভিত্তিতে বিভিন্ন ভিউ বা পেজ রেন্ডার করার সুযোগ দেয়।

Riot.js এ রাউটিং কনফিগার করতে আপনি তৃতীয় পক্ষের রাউটিং লাইব্রেরি যেমন Page.js বা Riot-router ব্যবহার করতে পারেন।

Riot.js একটি সহজ, হালকা এবং কম্পোনেন্ট-ভিত্তিক JavaScript লাইব্রেরি, যা Single Page Application (SPA) তৈরি করতে সহায়ক। Riot.js-এ Router ব্যবহারের মাধ্যমে আপনি সহজেই SPA তৈরি করতে পারেন যেখানে পেজের কন্টেন্ট ডায়নামিকভাবে আপডেট হয়, কিন্তু পেজ রিফ্রেশ হয় না। Riot.js এর রাউটার আপনাকে URL হ্যান্ডলিং এবং রুটের সাথে সম্পর্কিত কন্টেন্ট রেন্ডার করতে সাহায্য করবে।

Riot.js এর রাউটার ব্যবহার করে SPA তৈরি করার প্রক্রিয়া:

1. Riot.js Router ইনস্টলেশন: Riot.js-এ SPA তৈরির জন্য আপনাকে প্রথমে riot-router নামক একটি প্লাগইন ইনস্টল করতে হবে। এটি রাউটিংয়ের জন্য ব্যবহৃত হবে।

   আপনি npm দিয়ে এই প্লাগইন ইনস্টল করতে পারেন:

   npm install riot-router
   

   অথবা, CDN থেকে সরাসরি ব্যবহার করতে পারেন:

   <script src="https://cdn.jsdelivr.net/npm/riot-router@4.4.0/dist/riot-router.min.js"></script>
   

2. SPA এর জন্য রাউটারের সেটআপ: রাউটিং ব্যবহার করে বিভিন্ন URL এর জন্য কম্পোনেন্ট রেন্ডার করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো যেখানে তিনটি আলাদা পেজ (কম্পোনেন্ট) রুটিংয়ের মাধ্যমে প্রদর্শিত হবে।

Riot.js Router ব্যবহার করে SPA তৈরি করার উদাহরণ:

1. রুটার সেটআপ (Router Setup):

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Riot.js SPA Example</title>
  <script src="https://cdn.jsdelivr.net/npm/riot@6.0.0/riot+compiler.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/riot-router@4.4.0/dist/riot-router.min.js"></script>
</head>
<body>

  <div id="app"></div>

  <script type="riot">
    // Main App Component
    <app>
      <div>
        <nav>
          <a href="#/">Home</a>
          <a href="#/about">About</a>
          <a href="#/contact">Contact</a>
        </nav>

        <router-outlet></router-outlet>
      </div>

      <script>
        import { route, router } from 'riot-router';

        // Define routes
        router([
          { path: '/', component: 'home' },
          { path: '/about', component: 'about' },
          { path: '/contact', component: 'contact' }
        ]);

        // Initialize the router
        route();

        export default {};
      </script>
    </app>

    <!-- Home Component -->
    <home>
      <h1>Welcome to the Home Page!</h1>
    </home>

    <!-- About Component -->
    <about>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </about>

    <!-- Contact Component -->
    <contact>
      <h1>Contact Us</h1>
      <p>Feel free to reach out!</p>
    </contact>

  </script>

</body>
</html>

2. উল্লেখযোগ্য অংশ:

• router-outlet:
  • router-outlet হল রাউটার দ্বারা ডাইনামিকভাবে প্রতিস্থাপিত হওয়ার জায়গা। এই ট্যাগটি রুটের অনুযায়ী আলাদা কম্পোনেন্ট রেন্ডার করবে।
• route() এবং router():
  • router() ফাংশনে রুটগুলি ডিফাইন করা হয়, যেখানে প্রতিটি রুট একটি পাথ এবং সংশ্লিষ্ট কম্পোনেন্টের নাম থাকে। যেমন /about রুটটি about কম্পোনেন্টকে রেন্ডার করবে।
  • route() ফাংশনটি রাউটারকে শুরু করতে ব্যবহৃত হয়।
• কাস্টম কম্পোনেন্ট (home, about, contact):
  • প্রতিটি রুটের জন্য একটি কাস্টম Riot.js কম্পোনেন্ট তৈরি করা হয়েছে। এই কম্পোনেন্টগুলি রাউটের পাথ অনুযায়ী রেন্ডার হবে।

3. নেভিগেশন এবং ইউজার ইন্টারঅ্যাকশন:

• নেভিগেশন লিঙ্ক:
  • HTML এর <a> ট্যাগগুলোতে href দিয়ে প্রতিটি রুটের পাথ নির্ধারণ করা হয়েছে। এখানে # সাইনটি ব্যবহার করে রুট পাথ দেওয়া হয়েছে। যখন কোনো লিঙ্ক ক্লিক করা হবে, তখন সেই পাথের জন্য সংশ্লিষ্ট কম্পোনেন্ট রেন্ডার হবে, তবে পেজ রিফ্রেশ হবে না (SPA আচরণ)।

SPA তৈরি করার আরও কিছু টিপস:

1. কম্পোনেন্ট স্টাইলিং: Riot.js এ প্রতিটি কম্পোনেন্টের স্টাইল নিজস্বভাবে স্কোপড থাকে, তাই আপনি প্রতিটি কম্পোনেন্টের স্টাইল আলাদাভাবে কাস্টমাইজ করতে পারেন।
2. লেজি লোডিং (Lazy Loading): আপনি বড় অ্যাপ্লিকেশনের জন্য কম্পোনেন্টগুলো লেজি লোড করতে পারেন যাতে প্রথমে শুধুমাত্র প্রাথমিক কম্পোনেন্ট লোড হয় এবং পরবর্তী কম্পোনেন্টগুলো প্রয়োজন হলে লোড হয়।
3. স্টেট ম্যানেজমেন্ট: যদি অ্যাপ্লিকেশন বড় হয় এবং একাধিক কম্পোনেন্টের মধ্যে শেয়ার করা ডেটা প্রয়োজন হয়, তাহলে আপনি Riot.js এর স্টেট ম্যানেজমেন্ট ব্যবহার করতে পারেন, অথবা বাহ্যিক লাইব্রেরি (যেমন Redux) ব্যবহার করতে পারেন।

Riot.js-এ রাউটার ব্যবহার করে আপনি খুব সহজেই একটি Single Page Application (SPA) তৈরি করতে পারেন। এখানে বিভিন্ন রুটের জন্য বিভিন্ন কম্পোনেন্ট রেন্ডার করা হয় এবং পুরো পেজ রিফ্রেশ ছাড়াই ইউজারের নেভিগেশন সম্ভব হয়। Riot.js এর রাউটার ব্যবহার করে আপনি ডাইনামিকভাবে URL এর উপর ভিত্তি করে UI রেন্ডার করতে পারবেন, যা একটি আধুনিক SPA ডিজাইন করতে সহায়ক।

Riot.js মূলত একটি UI কম্পোনেন্ট লাইব্রেরি, তবে এটি সহজেই রাউটিং ব্যবস্থাও সমর্থন করতে পারে। যদিও Riot.js নিজে কোনো রাউটিং সিস্টেম সরবরাহ করে না, তবুও, riot-router নামে একটি প্লাগইন রয়েছে, যা দিয়ে আপনি nested routes এবং dynamic routes পরিচালনা করতে পারেন।

১. Riot.js এ রাউটিং ব্যবস্থাপনা (Riot-router)

Riot-router একটি লাইটওয়েট রাউটিং লাইব্রেরি যা Riot.js এর সাথে সহজে ইন্টিগ্রেট করা যায়। এটি আপনাকে ইউজার নেভিগেশন এবং URL পরিবর্তন ট্র্যাক করার জন্য উপযুক্ত রাউটিং মেকানিজম দেয়।

২. Riot.js এ রাউটিং কনফিগারেশন:

রাউটিং কনফিগারেশন করার জন্য, প্রথমে আপনাকে riot-router ইনস্টল করতে হবে। এটি আপনার অ্যাপ্লিকেশনকে রাউটিং সহ বিভিন্ন পৃষ্ঠা (views) দেখানোর ক্ষমতা দেয়।

npm install riot-router

এবার, আপনার Riot.js অ্যাপ্লিকেশনকে রাউটিং সিস্টেমে যুক্ত করতে হবে।

৩. Nested Routes এবং Dynamic Routes ব্যবস্থাপনা:

এখানে আমরা একটি উদাহরণ দেখাবো, যেখানে একটি অ্যাপ্লিকেশন Nested Routes এবং Dynamic Routes ব্যবহার করবে।

উদাহরণ 1: Basic Routing Setup (Simple Routes)

<!-- App.riot -->
<app>
  <nav>
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
    <a href="#/user/123">User 123</a>
  </nav>

  <div id="content"></div>

  <script>
    import riot from 'riot'
    import { router } from 'riot-router'

    // Component Definition
    import Home from './Home.riot'
    import About from './About.riot'
    import User from './User.riot'

    export default {
      onMounted() {
        router({
          '/home': () => riot.mount('#content', Home),
          '/about': () => riot.mount('#content', About),
          '/user/:id': (params) => riot.mount('#content', User, { id: params.id })
        })
      }
    }
  </script>
</app>

1. Nested Routes (ভিতরে রাউটিং)

Nested Routes ব্যবহার করার মাধ্যমে, আপনি একাধিক স্তরে রাউটিং পরিচালনা করতে পারেন। এইভাবে আপনি প্যারেন্ট কম্পোনেন্টের মধ্যে চাইল্ড কম্পোনেন্ট রেন্ডার করতে পারেন।

<!-- ParentComponent.riot -->
<parent-component>
  <nav>
    <a href="#/dashboard">Dashboard</a>
    <a href="#/settings">Settings</a>
  </nav>

  <div id="subContent"></div>  <!-- Subcomponent for nested routing -->

  <script>
    import riot from 'riot'
    import { router } from 'riot-router'

    // Nested Component Definitions
    import Dashboard from './Dashboard.riot'
    import Settings from './Settings.riot'

    export default {
      onMounted() {
        router({
          '/dashboard': () => riot.mount('#subContent', Dashboard),
          '/settings': () => riot.mount('#subContent', Settings)
        })
      }
    }
  </script>
</parent-component>

এখানে, #subContent নামক একটি ডিভে Dashboard বা Settings কম্পোনেন্ট রেন্ডার করা হবে, যা ParentComponent এর অংশ হিসেবে nested হবে।

2. Dynamic Routes (ডাইনামিক রাউটিং)

ডাইনামিক রাউটিং ব্যবহার করে URL এর ভিতর প্যারামিটার পাস করা হয়, যা কম্পোনেন্টে ডেটা হিসেবে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, /user/:id এর মাধ্যমে আপনি ইউজারের আইডি প্যারামিটার হিসেবে পাঠাতে পারেন এবং তা কম্পোনেন্টে ব্যবহার করতে পারেন।

<!-- UserComponent.riot -->
<user-component>
  <h1>User Profile</h1>
  <p>User ID: {opts.id}</p>

  <script>
    export default {
      onMounted() {
        console.log('User ID:', this.opts.id)
      }
    }
  </script>
</user-component>

এখানে opts.id দিয়ে আমরা ইউজারের আইডি দেখতে পারি যেটি URL থেকে পাওয়া গেছে। উদাহরণস্বরূপ, #/user/123 URL এর মাধ্যমে 123 আইডি UserComponent কম্পোনেন্টে পাস হবে।

৪. Riot.js রাউটিং কনফিগারেশন পরিপূর্ণ উদাহরণ:

<!-- App.riot -->
<app>
  <nav>
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
    <a href="#/user/123">User 123</a>
    <a href="#/profile">Profile</a>
  </nav>

  <div id="content"></div>

  <script>
    import riot from 'riot'
    import { router } from 'riot-router'

    // Component Imports
    import Home from './Home.riot'
    import About from './About.riot'
    import User from './User.riot'
    import Profile from './Profile.riot'

    export default {
      onMounted() {
        router({
          '/home': () => riot.mount('#content', Home),
          '/about': () => riot.mount('#content', About),
          '/user/:id': (params) => riot.mount('#content', User, { id: params.id }),
          '/profile': () => riot.mount('#content', Profile)
        })
      }
    }
  </script>
</app>

সারাংশ:

1. Nested Routes: একটি রাউটের মধ্যে অন্য রাউটকে রেন্ডার করা হয়, যেমন একটি প্যারেন্ট কম্পোনেন্টের মধ্যে চাইল্ড কম্পোনেন্ট।
2. Dynamic Routes: URL প্যারামিটার ব্যবহার করে ডাইনামিক রাউট তৈরি করা হয়। এটি ডেটা পাস করার জন্য খুবই কার্যকর।
3. Riot-router: Riot.js এর সাথে রাউটিং পরিচালনার জন্য riot-router ব্যবহার করা যেতে পারে, যা রাউটিং পদ্ধতিটি সহজ এবং কার্যকর করে তোলে।

এই উদাহরণগুলি Riot.js এর মধ্যে রাউটিং, নেস্টেড রাউট এবং ডাইনামিক রাউট ব্যবহার করার মৌলিক ধারণা তুলে ধরে।

Riot.js এ Router Events এবং Navigation Handling অ্যাপ্লিকেশনের রাউটিং এবং ভিউ স্যুইচিং ব্যবস্থাপনার জন্য ব্যবহৃত হয়। Riot.js নিজে একটি রাউটিং সিস্টেম প্রদান না করলেও, আপনি সহজেই তৃতীয় পক্ষের রাউটার ব্যবহার করতে পারেন বা নিজেই একটি সিম্পল রাউটিং সিস্টেম তৈরি করতে পারেন। এখানে, আমরা riot-router প্যাকেজ ব্যবহার করে রাউটিং হ্যান্ডলিং এবং Router Events কিভাবে কাজ করে তা দেখাব।

১. Riot.js এ রাউটিং সিস্টেম সেটআপ করা

আমরা riot-router প্যাকেজটি ব্যবহার করে Riot.js অ্যাপ্লিকেশনগুলির জন্য রাউটিং হ্যান্ডলিং সেটআপ করতে পারি। এর মাধ্যমে আপনি URL-এর পরিবর্তন অনুযায়ী বিভিন্ন কম্পোনেন্ট রেন্ডার করতে পারেন।

Step 1: riot-router ইনস্টল করা

প্রথমে, আপনাকে riot-router প্যাকেজটি ইনস্টল করতে হবে। আপনি npm বা yarn ব্যবহার করে এটি ইনস্টল করতে পারেন।

npm install riot-router

Step 2: রাউটার সেটআপ করা

আপনার Riot.js অ্যাপ্লিকেশনকে রাউটিং সিস্টেমে পরিণত করার জন্য riot-router ব্যবহার করতে হবে।

import riot from 'riot';
import { route, router } from 'riot-router';

import './home.riot';
import './about.riot';
import './notfound.riot';

// Home কম্পোনেন্ট
riot.component('home', {
  onMounted() {
    this.message = 'Welcome to the Home Page!';
  },
  template: `<h1>{message}</h1>`
});

// About কম্পোনেন্ট
riot.component('about', {
  onMounted() {
    this.message = 'This is the About Page!';
  },
  template: `<h1>{message}</h1>`
});

// 404 কম্পোনেন্ট (যখন কোনো রাউট পাওয়া না যায়)
riot.component('notfound', {
  onMounted() {
    this.message = 'Page not found!';
  },
  template: `<h1>{message}</h1>`
});

// রাউটিং সেটআপ
router(route('/home', 'home'));
router(route('/about', 'about'));
router(route('*', 'notfound'));  // সবকিছুর জন্য ফ fallback

// অ্যাপ্লিকেশন মাউন্ট করা
riot.mount('home');

ব্যাখ্যা:

• router(): এটি রাউটের জন্য URL ম্যাপিং সেট করে। যেমন, /home রুটে home কম্পোনেন্ট এবং /about রুটে about কম্পোনেন্ট রেন্ডার করা হবে।
• route(): এটি রাউটের পাথ এবং কম্পোনেন্টের নাম সন্নিবেশ করে।
• * রুট দিয়ে আমরা 404 পেজ বা ফ্যালব্যাক রাউট নির্ধারণ করেছি, যা এমন কোনো রাউট পাওয়া না গেলে ব্যবহৃত হবে।

৩. Router Events হ্যান্ডলিং

riot-router এ রাউটিং পরিবর্তন হলে কিছু ইভেন্ট ঘটে যা আপনি হ্যান্ডল করতে পারেন, যেমন before এবং after রাউট ইভেন্টস।

Step 1: Router Event Listeners ব্যবহার করা

import { router, route } from 'riot-router';

// Before এবং After রাউট ইভেন্ট হ্যান্ডল করা
router.before('/home', () => {
  console.log('Navigating to Home...');
});

router.after('/about', () => {
  console.log('Navigated to About!');
});

// রাউট সেটআপ
router(route('/home', 'home'));
router(route('/about', 'about'));

ব্যাখ্যা:

• router.before(route, callback): যখন নির্দিষ্ট রাউটে যাওয়া হবে, তখন একটি কাস্টম কলব্যাক ফাংশন চালানো হয়। আপনি এখানে রাউটিং পরিবর্তন হওয়ার আগে কিছু কাজ করতে পারেন (যেমন, লগিং, প্রিপ্যারেশন ইত্যাদি)।
• router.after(route, callback): রাউট পরিবর্তন হওয়ার পরে কিছু কাজ করা যেতে পারে, যেমন ডেটা ফেচ করা বা UI আপডেট করা।

৪. riot-router এ Navigation Handling

রাউটার সঠিকভাবে কাজ করার জন্য নেভিগেশন হ্যান্ডলিং গুরুত্বপূর্ণ। রাউটারের মাধ্যমে একটি পেজে যাওয়ার সময় নেভিগেট করতে route() ফাংশন ব্যবহার করা হয়।

Step 1: URL পরিবর্তন করতে route() ব্যবহার করা

import { route } from 'riot-router';

// হোম পেজে নেভিগেট করা
function navigateToHome() {
  route('/home');
}

// অ্যাবাউট পেজে নেভিগেট করা
function navigateToAbout() {
  route('/about');
}

এখানে, route('/home') দিয়ে হোম পেজে নেভিগেট করা হচ্ছে।

Step 2: নেভিগেটর হিসেবে লিঙ্ক ব্যবহার করা

আপনি অ্যাঙ্কর ট্যাগ ব্যবহার করেও রাউট চেঞ্জ করতে পারেন:

<a href="/home" onclick={navigateToHome}>Go to Home</a>
<a href="/about" onclick={navigateToAbout}>Go to About</a>

এছাড়া, যদি আপনি URL পরিবর্তন করতে চান তবে route() ফাংশন ব্যবহার করতে পারেন।

৫. রাউটিং ফিচারস এর কাস্টমাইজেশন

আপনি চাইলে রাউটারের অন্যান্য ফিচারগুলো কাস্টমাইজ করতে পারেন, যেমন:

1. 404 পেজ: আপনি একটি 404 পেজ তৈরি করতে পারেন যেখানে অবৈধ URL গেলে ব্যবহারকারীকে ডাইভার্ট করা হবে।
2. এনক্রিপ্টেড রাউট: আপনি রাউটসের জন্য বিভিন্ন সিকিউরিটি চেক ব্যবহার করতে পারেন (যেমন, লগইন চেক)।
3. প্যারামিটার ব্যবহার: URL প্যারামিটার বা কুয়েরি স্ট্রিং ব্যবহার করে ডাইনামিক কন্টেন্ট রেন্ডার করতে পারেন।

উদাহরণ: রাউট প্যারামিটার

router(route('/user/:id', 'userProfile'));

riot.component('userProfile', {
  onMounted() {
    const userId = this.opts.id;
    this.message = `Displaying profile for user ${userId}`;
  },
  template: `<h1>{message}</h1>`
});

এখানে, :id রাউট প্যারামিটার ব্যবহার করা হয়েছে, যা কম্পোনেন্টের opts.id হিসেবে প্রাপ্ত হবে।

Riot.js-এ রাউটিং এবং নেভিগেশন হ্যান্ডলিং খুবই গুরুত্বপূর্ণ এবং সহজে কনফিগার করা যায়। riot-router প্যাকেজ ব্যবহার করে আপনি রাউটিং ইভেন্টস (যেমন, before এবং after), কাস্টম URL, প্যারামিটার, এবং 404 পেজগুলোকে সুন্দরভাবে ম্যানেজ করতে পারবেন। route() এবং router ফাংশনের মাধ্যমে URL পরিবর্তন করা সহজ এবং কার্যকর।