Child Router এবং Nested Routes

Aurelia একটি শক্তিশালী routing system সরবরাহ করে, যা আপনাকে অ্যাপ্লিকেশনের বিভিন্ন অংশের জন্য নির্দিষ্ট রাউট তৈরি করতে সহায়তা করে। Child Router এবং Nested Routes এই রাউটিং সিস্টেমের দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা আপনাকে হায়ারার্কিক্যাল (hierarchical) রাউটিং কনফিগারেশন তৈরি করতে সাহায্য করে।

এই ফিচারগুলো ব্যবহার করে আপনি অ্যাপ্লিকেশনের ভিন্ন ভিন্ন অংশে সাব-রাউট নির্ধারণ করতে পারবেন এবং একটি অভ্যন্তরীণ রাউটিং কাঠামো তৈরি করতে পারবেন।

১. Child Router কী?

Child Router হল একটি router instance যা একটি প্রধান রাউটার (parent router) এর অধীনে কাজ করে। এটি আপনাকে সাব-রাউট তৈরি করতে এবং মূল রাউটের অভ্যন্তরে একটি নতুন রাউটের সিস্টেম তৈরি করতে সাহায্য করে।

Child Router ব্যবহারের মাধ্যমে আপনি রুটগুলোর মধ্যে nested structure তৈরি করতে পারেন, যেখানে প্রধান রাউটার একটি ভিউয়ের মধ্যে নতুন রাউট লোড করে।

২. Child Router সেটআপ

Aurelia-তে Child Router সেটআপ করতে নিচের ধাপগুলো অনুসরণ করতে হবে:

১. Parent Router (মূল রাউটার)

প্রথমে, আপনার মূল রাউটার ফাইল (যেমন app.js বা main.js) তৈরি করুন এবং এখানে child router সেটআপ করুন।

app.js (Parent Router)

export class App {
  static inject = [Router];

  constructor(router) {
    this.router = router;
  }

  configureRouter(config, router) {
    config.map([
      { route: '', moduleId: './home', nav: true, title: 'Home' },
      { route: 'about', moduleId: './about', nav: true, title: 'About' },
      { route: 'contact', moduleId: './contact', nav: true, title: 'Contact' },
      { route: 'parent', moduleId: './parent', name: 'parent', nav: true, title: 'Parent' }
    ]);

    this.router = router;
  }
}

এখানে, parent নামক রাউটের জন্য একটি moduleId সেট করা হয়েছে যা Child Router ধারণ করবে।

২. Child Router (সাব রাউটার)

Child Router অ্যাপ্লিকেশনের ভিতরে একটি নতুন রাউটিং সিস্টেম তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত সাব ভিউ বা সাব রাউটের জন্য ব্যবহার করা হয়।

parent.js (Child Router)

export class Parent {
  static inject = [Router];

  constructor(router) {
    this.router = router;
  }

  configureRouter(config, router) {
    config.map([
      { route: '', moduleId: './child-home', nav: true, title: 'Child Home' },
      { route: 'child-about', moduleId: './child-about', nav: true, title: 'Child About' }
    ]);

    this.router = router;
  }
}

এখানে, Parent কম্পোনেন্টে Child Router তৈরি করা হয়েছে এবং এতে দুটি সাব-রাউট (child-home এবং child-about) ম্যাপ করা হয়েছে।

৩. Child Views

এখন, আপনাকে child views তৈরি করতে হবে যা উপরের রাউটগুলোর সাথে যুক্ত থাকবে। উদাহরণস্বরূপ:

child-home.js (Child View)

export class ChildHome {
  message = 'Welcome to the Child Home view!';
}

child-about.js (Child View)

export class ChildAbout {
  message = 'Welcome to the Child About view!';
}

৩. Nested Routes কী?

Nested Routes হল রাউটগুলোর একটি ধাপ-ধাপে গঠন, যেখানে এক রাউটার অন্য রাউটারের অধীনে থাকে। সাধারণত একটি রুটের ভেতরে অন্য রুটের উপস্থাপন (render) করা হয়, যা অ্যাপ্লিকেশনের গঠনকে সহজ এবং পরিষ্কার করে তোলে।

Aurelia-তে nested routes তৈরি করতে আপনি child router ব্যবহার করতে পারেন, যাতে আপনার অ্যাপ্লিকেশনের বিভিন্ন অংশের জন্য সাব রাউট নির্ধারণ করা যায়।

৪. Nested Routes সেটআপ

Nested Routes তৈরি করার জন্য, আপনি উপরের মতো Child Router ব্যবহার করতে পারেন এবং রাউটের ভিতরে নতুন রাউটগুলি ম্যাপ করতে পারেন।

উদাহরণ: Parent-Child Nested Routes

parent.html (Parent View)

<template>
  <h2>Parent View</h2>
  <nav>
    <a href="#/parent/child-home">Child Home</a> |
    <a href="#/parent/child-about">Child About</a>
  </nav>

  <router-view></router-view> <!-- Nested Route Rendering -->
</template>

এখানে, <router-view> ট্যাগটি ব্যবহৃত হয়েছে যেখানে child routes এর ভিউ রেন্ডার হবে।

৫. Routing Flow

Aurelia-তে child router এবং nested routes ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনে রাউটিং কাঠামো নিম্নরূপ হবে:

1. যখন আপনি /parent রাউট পাবেন, এটি parent.js কম্পোনেন্ট লোড করবে।
2. এরপর /parent/child-home বা /parent/child-about এর মাধ্যমে যে সাব রাউটটি নির্বাচন করা হবে, সেটি Child Router এর মাধ্যমে লোড হবে।
3. <router-view> ট্যাগটি এই সাব রাউটের ভিউ রেন্ডার করবে।

৬. Nested Routes এর সুবিধা

• ক্লিন কোড: Nested routes অ্যাপ্লিকেশনের বিভিন্ন অংশকে আলাদা এবং পরিষ্কার রাখে।
• রিইউজেবল কম্পোনেন্ট: Child router এর মাধ্যমে আপনি ছোট ছোট ভিউ কম্পোনেন্ট তৈরি করতে পারেন, যা বিভিন্ন জায়গায় রিইউজ করা যাবে।
• ডায়নামিক রাউটিং: সাব রাউটের মাধ্যমে ডায়নামিক রাউটিং তৈরি করা সম্ভব, যেখানে আপনি ভিন্ন ভিন্ন পেজে ডেটা পাস করতে পারেন।

উপসংহার

Child Router এবং Nested Routes Aurelia-তে একটি অ্যাপ্লিকেশনের অভ্যন্তরে সুনির্দিষ্ট ভিউয়ের জন্য শক্তিশালী রাউটিং কাঠামো তৈরি করতে সাহায্য করে। এই ফিচারগুলো ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরো মডুলার এবং রক্ষণাবেক্ষণযোগ্য করে তুলতে পারেন।