Nested Routes এবং Dynamic Routes পরিচালনা

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 এর মধ্যে রাউটিং, নেস্টেড রাউট এবং ডাইনামিক রাউট ব্যবহার করার মৌলিক ধারণা তুলে ধরে।