Dynamic Routing এবং URL Parameters গাইড ও নোট

Mobile App Development - মিটিয়র (Meteor) - Routing এবং Navigation
356

Dynamic Routing

Dynamic Routing ওয়েব অ্যাপ্লিকেশন বা API তে এমন রাউটিং প্রক্রিয়া যা রাউটের অংশ হিসেবে ভ্যারিয়েবল বা পরিবর্তনশীল মান গ্রহণ করতে পারে। অর্থাৎ, রাউটের URL প্যাটার্নে ভিন্ন ভিন্ন ডেটা প্রদান করা যেতে পারে এবং সেই অনুযায়ী অ্যাপ্লিকেশন সাড়া দেয়।

Dynamic Routing ব্যবহার করলে একটি নির্দিষ্ট পাথের জন্য একাধিক ডেটা ভ্যালু প্রেরণ করা যায়, এবং সার্ভার বা ক্লায়েন্ট সাইড এই ডেটা অনুযায়ী উপযুক্ত রেসপন্স প্রদান করতে পারে।

উদাহরণ:

  • /users/:id — এখানে :id হল একটি প্যারামিটার যা ডাইনামিক রাউটিংয়ের জন্য ব্যবহৃত হয়। অর্থাৎ, আপনি /users/1, /users/2 বা /users/any-id এর মতো URL ব্যবহার করতে পারেন এবং সার্ভার সেই id এর মান অনুযায়ী সাড়া দিবে।

URL Parameters

URL Parameters হল একটি URL এর অংশ যা মূল URL এর পরে ? চিহ্ন দিয়ে শুরু হয় এবং কীগুলির মান নির্দেশ করে। URL প্যারামিটারগুলি সার্ভারকে ক্লায়েন্টের থেকে অতিরিক্ত তথ্য প্রেরণ করতে ব্যবহৃত হয়, যা সার্ভারের জন্য প্রয়োজনীয় হতে পারে। URL প্যারামিটারগুলি query strings হিসেবেও পরিচিত।

উদাহরণ:

  • https://example.com/products?id=123&category=shoes
    এখানে id এবং category হল প্যারামিটার, এবং 123 এবং shoes তাদের মান।

Types of URL Parameters

  1. Path Parameters (Dynamic Parameters):
    • URL এর পাথ অংশে (Path) থাকা পরিবর্তনশীল মানকে Path Parameters বলা হয়। এগুলি রাউটিং প্যাটার্নে ব্যবহৃত হয়, যেমন /users/:id
    • উদাহরণ:
      /posts/:postId - এখানে :postId হল একটি Path Parameter।
  2. Query Parameters:
    • URL এর শেষে ? দিয়ে শুরু হয় এবং একাধিক কিপেয়ার ভ্যালু প্যারামিটার হিসেবে যুক্ত করা হয়। সাধারণত filtering, pagination ইত্যাদি জন্য ব্যবহৃত হয়।
    • উদাহরণ:
      https://example.com/search?q=product&page=2
      এখানে q এবং page হল query parameters

Dynamic Routing এবং URL Parameters এর ব্যবহার

Client-Side Routing (React, Angular, Vue.js)

  • React Router (React Example):
    React অ্যাপ্লিকেশন গুলিতে, Dynamic Routing এবং URL Parameters ব্যবহৃত হয় react-router-dom লাইব্রেরির মাধ্যমে। :param এর মাধ্যমে ডাইনামিক রাউটিং এবং URL প্যারামিটার গ্রহণ করা যায়।
// React Router Example
import { BrowserRouter as Router, Route, useParams } from "react-router-dom";

function PostDetail() {
    let { postId } = useParams(); // Retrieve URL parameter 'postId'
    return <h2>Post ID: {postId}</h2>;
}

function App() {
    return (
        <Router>
            <Route path="/post/:postId" component={PostDetail} />
        </Router>
    );
}

Server-Side Routing (Node.js with Express)

  • Node.js Express Example: Express.js-এ Dynamic Routing এবং URL Parameters ব্যবহার করা যায়। Express.js-এ req.params এবং req.query এর মাধ্যমে প্যারামিটারগুলো এক্সেস করা যায়।
// Express.js Example
const express = require('express');
const app = express();

// Dynamic Routing with Path Parameter
app.get('/users/:userId', (req, res) => {
    const userId = req.params.userId; // Path parameter
    res.send(`User ID: ${userId}`);
});

// Query Parameters
app.get('/search', (req, res) => {
    const searchQuery = req.query.q; // Query parameter
    res.send(`Search Query: ${searchQuery}`);
});

app.listen(3000, () => console.log('Server running on port 3000'));

URL Parameters with Query String

Query Parameters সাধারণত ব্যবহারকারীর নির্বাচিত ডেটা ফিল্টার বা সার্চ কন্ডিশন ফিল্টার করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি সার্চ পেজে ইউজারের দেওয়া কিওয়ার্ড অনুসারে সার্চ করা:

// Express.js with Query String Example
app.get('/products', (req, res) => {
    const { category, price } = req.query; // Get 'category' and 'price' from query string
    res.send(`Products in ${category} category under ${price} price`);
});

এখানে URL হবে:
https://example.com/products?category=shoes&price=50


সারাংশ

Dynamic Routing এবং URL Parameters ওয়েব অ্যাপ্লিকেশন বা API ডেভেলপমেন্টে গুরুত্বপূর্ণ ভূমিকা পালন করে। Dynamic Routing এর মাধ্যমে URL পাথের অংশে পরিবর্তনশীল ডেটা গ্রহণ করা যায়, যা অ্যাপ্লিকেশনকে আরো নমনীয় এবং ডায়নামিক করে তোলে। অন্যদিকে, URL Parameters (Path এবং Query) সার্ভার বা ক্লায়েন্টের সাথে অতিরিক্ত তথ্য ভাগ করতে ব্যবহৃত হয়, যা বিশেষভাবে সার্চ, ফিল্টার, পেজিনেশন ইত্যাদি ক্ষেত্রে কার্যকর।

Content added By
Promotion
NEW SATT AI এখন আপনাকে সাহায্য করতে পারে।

Are you sure to start over?

Loading...