সিঙ্গেল-পেজ অ্যাপ্লিকেশনে রাউটিং

১ · SPA-তে রাউটিং কেন আলাদা

ঐতিহ্যবাহী মাল্টি-পেজ ওয়েবসাইটে প্রতিটি লিংকে ক্লিক করলে ব্রাউজার সার্ভারকে একটি নতুন রিকোয়েস্ট পাঠায় এবং সম্পূর্ণ নতুন HTML পেজ ডাউনলোড করে (L01-L02-এর client-server চক্র)। কিন্তু একটি সিঙ্গেল-পেজ অ্যাপ্লিকেশনSPAএকটি ওয়েব অ্যাপ যেখানে প্রথমবার একটি HTML পেজ লোড হওয়ার পর, পরবর্তী "পেজ পরিবর্তন" জাভাস্ক্রিপ্ট দিয়ে ক্লায়েন্ট-সাইডেই হ্যান্ডেল হয়, সার্ভার থেকে নতুন পুরো পেজ না এনেই।-এ পুরো অ্যাপ একবারই লোড হয় — এরপর ব্যবহারকারী যখন একটি "লিংকে" ক্লিক করেন, জাভাস্ক্রিপ্ট নিজেই ব্রাউজারের URL বদলে দেয় (ব্রাউজারকে সার্ভারে রিকোয়েস্ট পাঠাতে না দিয়ে), তারপর সেই নতুন URL দেখে ঠিক করে কোন কম্পোনেন্ট স্ক্রিনে দেখাতে হবে — এটাই ক্লায়েন্ট-সাইড রাউটিং। এতে পেজ পরিবর্তন অনেক দ্রুত হয় (সম্পূর্ণ HTML/CSS/JS আবার ডাউনলোড করতে হয় না), কিন্তু এর জন্য অ্যাপের নিজেরই একটি রাউটার থাকতে হয় যা URL-কে সঠিক কম্পোনেন্টে ম্যাপ করে।

২ · ডাইনামিক পাথ সেগমেন্ট — :id-স্টাইল ওয়াইল্ডকার্ড

L01-এর Router ক্লাস শুধু হুবহু-মেলা স্ট্যাটিক পাথ (/users, /about) হ্যান্ডেল করতে পারত — প্রতিটি সম্ভাব্য পাথের জন্য আলাদা একটি ডিকশনারি এন্ট্রি লাগত। কিন্তু /users/1, /users/2, /users/42 — এরকম হাজারো ইউজারের জন্য আলাদা রুট রেজিস্টার করা অবাস্তব। সমাধান হলো একটি প্যাটার্ন রেজিস্টার করা — /users/:id — যেখানে :id অংশটি একটি ওয়াইল্ডকার্ড: যেকোনো মানের সাথে মিলবে, আর সেই আসল মানটি (যেমন "42") হ্যান্ডলার ফাংশনে ক্যাপচার-করা প্যারামিটার হিসেবে পাঠানো হবে।

৩ · হাতে-লেখা path matcher

নিচের কোড সেলে re মডিউলের বদলে শুধু str.split('/') ও একটি সরল লুপ দিয়ে একটি সম্পূর্ণ কার্যকর match_route(pattern, path) ফাংশন তৈরি করা হয়েছে — এটি প্যাটার্ন ও পাথকে / দিয়ে সেগমেন্টে ভেঙে, সেগমেন্ট-বাই-সেগমেন্ট তুলনা করে, :-দিয়ে-শুরু-হওয়া সেগমেন্টকে ওয়াইল্ডকার্ড হিসেবে ট্রিট করে মান ক্যাপচার করে। এই matcher-এর উপর ভিত্তি করে একটি সম্পূর্ণ Router তৈরি করা হয়েছে যার navigate() মেথড ফুল পেজ রিলোড ছাড়াই "নেভিগেশন" সিমুলেট করে।

def match_route(pattern, path):
    """pattern (যেমন '/users/:id') এর সাথে path (যেমন '/users/42') মেলে কি না দেখে।
    মিললে ক্যাপচার-করা প্যারামিটারের dict রিটার্ন করে (কোনো ডাইনামিক অংশ না থাকলে খালি dict),
    না মিললে None রিটার্ন করে। কোনো regex ব্যবহার করা হয়নি -- শুধু split ও তুলনা।"""
    pattern_parts = [seg for seg in pattern.split('/') if seg != '']
    path_parts = [seg for seg in path.split('/') if seg != '']

    if len(pattern_parts) != len(path_parts):
        return None  # সেগমেন্ট সংখ্যা না মিললে কখনোই মিলবে না

    params = {}
    for pattern_seg, path_seg in zip(pattern_parts, path_parts):
        if pattern_seg.startswith(':'):
            param_name = pattern_seg[1:]      # ':id' -> 'id'
            params[param_name] = path_seg      # আসল মান ক্যাপচার করা হলো
        elif pattern_seg != path_seg:
            return None                        # স্ট্যাটিক অংশ হুবহু না মিললে ব্যর্থ

    return params


class Router:
    """L01-এর Router-এর মতোই decorator-ভিত্তিক, কিন্তু ডাইনামিক সেগমেন্ট সমর্থন করে"""

    def __init__(self):
        self.routes = []  # (pattern, handler) -- ইনসার্শন-অর্ডারে রাখা হয়

    def route(self, pattern):
        def decorator(handler_fn):
            self.routes.append((pattern, handler_fn))
            return handler_fn
        return decorator

    def navigate(self, path):
        """'নেভিগেশন' সিমুলেট করে -- কোনো প্রকৃত পেজ রিলোড হয় না, শুধু মিলে যাওয়া হ্যান্ডলার কল হয়"""
        for pattern, handler in self.routes:
            params = match_route(pattern, path)
            if params is not None:
                print(f"navigate('{path}') -> প্যাটার্ন '{pattern}' মিলেছে, params={params}")
                return handler(**params)
        print(f"navigate('{path}') -> কোনো রুট মেলেনি (404)")
        return None


app = Router()

@app.route('/')
def home():
    return "হোমপেজ কম্পোনেন্ট রেন্ডার হলো"

@app.route('/users')
def user_list():
    return "সব ইউজারের লিস্ট কম্পোনেন্ট রেন্ডার হলো"

@app.route('/users/:id')
def user_detail(id):
    return f"ইউজার #{id}-এর প্রোফাইল কম্পোনেন্ট রেন্ডার হলো"

@app.route('/posts/:postId/comments/:commentId')
def comment_detail(postId, commentId):
    return f"পোস্ট #{postId}-এর কমেন্ট #{commentId} কম্পোনেন্ট রেন্ডার হলো"


test_paths = ['/', '/users', '/users/42', '/posts/7/comments/3', '/unknown']

for path in test_paths:
    rendered = app.navigate(path)
    print(f"  রেন্ডার-করা আউটপুট: {rendered}\n")

কোড Run করার আগে হাতে ট্রেস করে যাচাই করা যাক প্রতিটি পাথ কী রেজাল্ট দেবে:

• '/' — pattern_parts ও path_parts দুটোই খালি লিস্ট ([]), দৈর্ঘ্য সমান (০), তুলনা করার কিছু নেই — {} রিটার্ন, home() কল হয়।
• '/users' — ['users'] বনাম ['users'], স্ট্যাটিক অংশ হুবহু মিলে — {} রিটার্ন, user_list() কল হয়।
• '/users/42' — প্যাটার্ন ['users', ':id'] বনাম পাথ ['users', '42']: প্রথম সেগমেন্ট স্ট্যাটিক মিল, দ্বিতীয়টি :id ওয়াইল্ডকার্ড তাই params['id'] = '42' — user_detail(id='42') কল হয়।
• '/posts/7/comments/3' — প্যাটার্ন ['posts', ':postId', 'comments', ':commentId'] বনাম পাথ ['posts', '7', 'comments', '3']: উভয় ডাইনামিক সেগমেন্ট ক্যাপচার হয় — comment_detail(postId='7', commentId='3') কল হয়।
• '/unknown' — একটি মাত্র সেগমেন্ট (['unknown']); বাকি সব রেজিস্টার্ড প্যাটার্নের সেগমেন্ট-সংখ্যা হয় ০, ১ (কিন্তু স্ট্যাটিক 'users' মেলে না), ২, বা ৪ — কোনোটাই মেলে না, তাই "কোনো রুট মেলেনি (404)" প্রিন্ট হয়।