সমাধান করা হয়েছে: প্রতিক্রিয়া রাউটার ডোম ডাউনলোড করুন

React Router DOM ডাউনলোড করার সাথে সম্পর্কিত প্রধান সমস্যা হল এটি কনফিগার করা এবং সেট আপ করা কঠিন হতে পারে। রিঅ্যাক্ট রাউটার DOM-এর জন্য অনেক কনফিগারেশন এবং সেটআপ প্রয়োজন, যা লাইব্রেরিতে নতুন ডেভেলপারদের জন্য সময়সাপেক্ষ এবং জটিল হতে পারে। উপরন্তু, প্রতিক্রিয়া রাউটার DOM ক্রমাগত বিকশিত হচ্ছে, তাই ডেভেলপারদের তাদের অ্যাপ্লিকেশনগুলির সাথে সামঞ্জস্যতা নিশ্চিত করার জন্য সর্বশেষ সংস্করণের সাথে আপ-টু-ডেট থাকতে হবে।

import { BrowserRouter as Router, Route } from "react-router-dom";

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

1. “'react-router-dom' থেকে { ব্রাউজার রাউটার রাউটার, রুট } হিসাবে আমদানি করুন;” - এই লাইনটি রিঅ্যাক্ট-রাউটার-ডোম লাইব্রেরি থেকে ব্রাউজার রাউটার এবং রুট উপাদান আমদানি করে।

2. “ReactDOM.render(” – এই লাইনটি সরবরাহকৃত কন্টেইনারে DOM-এ একটি প্রতিক্রিয়া উপাদান রেন্ডার করার জন্য ReactDOM রেন্ডার পদ্ধতিকে বলে এবং কম্পোনেন্টের একটি রেফারেন্স ফেরত দেয় (অথবা স্টেটলেস কম্পোনেন্টের জন্য শূন্য দেয়)।

3. "” – এটি একটি রাউটার উপাদানের জন্য একটি খোলার ট্যাগ যা আমাদের অ্যাপ্লিকেশনের জন্য রাউটিং কার্যকারিতা প্রদান করার জন্য আমাদের সমস্ত রুট মোড়ানোর জন্য ব্যবহার করা হবে।

4. "” – এটি একটি রুট উপাদানের জন্য একটি খোলার ট্যাগ যা আমাদের অ্যাপ্লিকেশনের মধ্যে একটি একক রুট নির্ধারণ করতে ব্যবহার করা হবে যা '/' এ করা যেকোনো অনুরোধের সাথে মেলে।

5. "” – এটি একটি সেলফ ক্লোজিং ট্যাগ যা আমাদের DOM ট্রিতে একটি অ্যাপ কম্পোনেন্ট রেন্ডার করে যখন এই রুটটি রিঅ্যাক্ট রাউটার ডোমের সাথে মিলে যায়।
অ্যাপ কম্পোনেন্ট যেকোন রিঅ্যাক্ট কম্পোনেন্ট হতে পারে যা আমরা আমাদের কোডবেসের অন্য কোথাও সংজ্ঞায়িত করেছি বা অন্য লাইব্রেরি বা প্যাকেজ যেমন ম্যাটেরিয়াল UI বা বুটস্ট্র্যাপ ইত্যাদি থেকে আমদানি করেছি...

6. “” – এটি রুট কম্পোনেন্টের জন্য একটি ক্লোজিং ট্যাগ যা উপরের লাইন 4 এ খোলা হয়েছিল, এটি এই নির্দিষ্ট রুট সংজ্ঞাটি বন্ধ করে দেয় যাতে এটির কার্যকারিতা বা আচরণকে প্রভাবিত না করে পরবর্তীতে আমাদের কোডবেসে প্রয়োজন হলে অন্যান্য রুট যোগ করা যেতে পারে। .

7. “” – এটি রাউটার কম্পোনেন্টের জন্য একটি ক্লোজিং ট্যাগ যা উপরের লাইন 3-এ খোলা হয়েছিল, এটি এই নির্দিষ্ট রাউটারের সংজ্ঞা বন্ধ করে দেয় যাতে পরবর্তীতে আমাদের কোডবেসে প্রয়োজন হলে অন্যান্য রাউটার যোগ করা যেতে পারে এর কার্যকারিতা বা আচরণকে প্রভাবিত না করে। ..

8."document.getElementById('root'));" – পরিশেষে, আমরা ReactDOM রেন্ডার পদ্ধতির যুক্তি হিসাবে getElementById('root') নথিতে পাস করি যা এটি বলে যে আমরা ঠিক কোথায় DOM গাছের ভিতরে অ্যাপ মাউন্ট/রেন্ডার করতে চাই (এই ক্ষেত্রে id সহ একটি উপাদানের ভিতরে =” মূল")।

প্রতিক্রিয়া-রাউটার-ডম প্যাকেজ

প্রতিক্রিয়া রাউটার প্রতিক্রিয়ার জন্য একটি জনপ্রিয় রাউটিং লাইব্রেরি। এটি অ্যাপ্লিকেশন রুট এবং নেভিগেশন পরিচালনার জন্য একটি শক্তিশালী, সহজে ব্যবহারযোগ্য API প্রদান করে। রিঅ্যাক্ট-রাউটার-ডম প্যাকেজটি ওয়েব অ্যাপ্লিকেশনের জন্য রিঅ্যাক্ট রাউটারের অফিসিয়াল সংস্করণ। এটি যেমন উপাদান প্রদান করে এবং আপনার অ্যাপে রাউটিং পরিচালনা করতে সাহায্য করতে। এটিতে আপনার উপাদানগুলির মধ্যে থেকে বর্তমান রুটের তথ্য অ্যাক্সেস করতে useHistory, useLocation এবং useParams-এর মতো হুকগুলিও অন্তর্ভুক্ত রয়েছে। রিঅ্যাক্ট-রাউটার-ডোম দিয়ে আপনি সহজেই ইউআরএল প্যারামিটার, ক্যোয়ারী স্ট্রিং বা এমনকি কাস্টম লজিকের উপর ভিত্তি করে গতিশীল রুট তৈরি করতে পারেন। আপনি আপনার অ্যাপ্লিকেশনের নেভিগেশন কাঠামোর উপর আরও দানাদার নিয়ন্ত্রণ প্রদান করতে গতিশীল অংশগুলির সাথে নেস্টেড রুট তৈরি করতে পারেন।

প্রতিক্রিয়া রাউটার ডোম কোডের উদাহরণ কিভাবে ডাউনলোড করবেন

1. প্রতিক্রিয়া রাউটার ডোম ইনস্টল করুন:
আপনার প্রকল্প ডিরেক্টরিতে, প্রতিক্রিয়া রাউটার ডোম ইনস্টল করতে নিম্নলিখিত কমান্ডটি চালান:
`npm install react-router-dom`

2. প্রতিক্রিয়া রাউটার ডোম আমদানি করুন:
একবার আপনি প্রতিক্রিয়া রাউটার ডোম ইনস্টল করার পরে, আপনি নিম্নলিখিত কোড সহ আপনার প্রকল্পে এটি আমদানি করতে পারেন:
`প্রতিক্রিয়া-রাউটার-ডোম' থেকে { ব্রাউজার রাউটার রাউটার, রুট } হিসাবে আমদানি করুন`

3. একটি রুট উপাদান তৈরি করুন:
এরপরে, একটি রুট উপাদান তৈরি করুন যেটি পৃষ্ঠাটি রেন্ডার করবে যখন একজন ব্যবহারকারী নির্দিষ্ট পাথ পরিদর্শন করে। উদাহরণস্বরূপ, আপনার অ্যাপ্লিকেশনে কেউ/হোম ভিজিট করার সময় আপনি যদি একটি পৃষ্ঠা রেন্ডার করতে চান, আপনি নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:
``

4. রাউটার কম্পোনেন্ট দিয়ে আপনার অ্যাপটি মোড়ানো:
অবশেষে, রাউটার উপাদান দিয়ে আপনার অ্যাপটি মুড়ে দিন যাতে আপনার সমস্ত রুট সঠিকভাবে রেন্ডার করা হয়। আপনি আপনার রুট ফাইলে নিম্নলিখিত কোড ব্যবহার করে এটি করতে পারেন (সাধারণত index.js): ` `.