সমাধান: ইতিহাস প্রতিক্রিয়া রাউটার v6 অ্যাপ ব্যবহার করুন

হিস্ট্রি রিঅ্যাক্ট রাউটার v6 ব্যবহার করার সাথে সম্পর্কিত প্রধান সমস্যা হল এটি হ্যাশ-ভিত্তিক রাউটিং সমর্থন করে না। এর মানে হল যে সমস্ত ইউআরএল অবশ্যই পরম পাথ হতে হবে, যা অ্যাপ্লিকেশন পরিচালনা এবং বজায় রাখা কঠিন করে তুলতে পারে। উপরন্তু, গতিশীল রুটের জন্য কোন অন্তর্নির্মিত সমর্থন নেই, যা একাধিক পৃষ্ঠা সহ জটিল অ্যাপ্লিকেশন তৈরি করার সময় একটি সমস্যা হতে পারে। অবশেষে, হিস্ট্রি রিঅ্যাক্ট রাউটার v6 সার্ভার-সাইড রেন্ডারিংয়ের জন্য কোনো সমর্থন প্রদান করে না, যা কিছু ক্ষেত্রে প্রয়োজনীয় হতে পারে।

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

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// এই কোডটি প্রতিক্রিয়া-রাউটার-ডোম লাইব্রেরি থেকে BrowserRouter, Switch, Route এবং useHistory উপাদান আমদানি করে।
// এটি তারপর অ্যাপ নামে একটি ফাংশন তৈরি করে যা একটি ইতিহাস বস্তু তৈরি করতে useHistory হুক ব্যবহার করে।
// এই হিস্ট্রি অবজেক্টটি হ্যান্ডেলক্লিক নামক একটি ফাংশনে ব্যবহৃত হয় যা কল করা হলে ইতিহাস স্ট্যাকের উপর একটি নতুন এন্ট্রি পুশ করে।
// অ্যাপ ফাংশন তারপর কিছু JSX প্রদান করে যাতে একটি onClick হ্যান্ডলার সহ একটি বোতাম রয়েছে যা ক্লিক করার সময় হ্যান্ডেলক্লিককে কল করে।
// অবশেষে, এর ভিতরে একটি রুট কম্পোনেন্ট সহ একটি সুইচ কম্পোনেন্ট আছে যা NewLocation কম্পোনেন্ট রেন্ডার করে যখন এর পাথ “/new-location” এর সাথে মিলে যায়।

useHistory কি

useHistory হল রিঅ্যাক্ট রাউটার দ্বারা প্রদত্ত একটি রিঅ্যাক্ট হুক যা কম্পোনেন্টগুলিকে প্রোগ্রাম্যাটিকভাবে নেভিগেট করার জন্য ইতিহাস অবজেক্ট অ্যাক্সেস করতে দেয়। এটি ইতিহাসের স্ট্যাকে নতুন অবস্থানগুলি পুশ করতে, বর্তমান অবস্থানটি প্রতিস্থাপন করতে, ইতিহাসের পিছনে পিছনে যেতে ইত্যাদি ব্যবহার করা যেতে পারে।

আমি কীভাবে প্রতিক্রিয়াতে রুট ইতিহাস পেতে পারি

প্রতিক্রিয়া রাউটারে, আপনি useHistory হুক ব্যবহার করে রুট ইতিহাস পেতে পারেন। এই হুকটি ইতিহাসের উদাহরণে অ্যাক্সেস দেয় যা আপনি নেভিগেট করতে, আপনার অ্যাপের ইতিহাসে এবং আরও অনেক কিছুতে ব্যবহার করতে পারেন। এটি ব্যবহার করতে, কেবল প্রতিক্রিয়া রাউটার থেকে হুক আমদানি করুন এবং তারপরে এটিকে আপনার উপাদানে কল করুন:

'react-router-dom' থেকে { useHistory } আমদানি করুন;

const MyComponent = () => {
const history = useHistory();

// এখন আপনি `ইতিহাস` বস্তুর মাধ্যমে রুট ইতিহাস অ্যাক্সেস করতে পারেন।

ফেরত (…);
}

রাউটার ইতিহাস API ব্যবহার প্রতিক্রিয়া

হ্যাঁ, রিঅ্যাক্ট রাউটার বর্তমান অবস্থান এবং এর ইতিহাসের ট্র্যাক রাখতে HTML5 ইতিহাস API ব্যবহার করে। এটি রিঅ্যাক্ট রাউটারকে পৃষ্ঠাটি পুনরায় লোড না করেই আপডেট করার অনুমতি দেয়, নেভিগেশনকে দ্রুত এবং মসৃণ করে। হিস্ট্রি এপিআই ডিপ লিঙ্কিংয়ের জন্যও অনুমতি দেয়, যা ব্যবহারকারীদের জন্য লিঙ্কগুলিকে শেয়ার করা সহজ করে তোলে যা সরাসরি একটি অ্যাপ্লিকেশনের একটি নির্দিষ্ট পৃষ্ঠায় নিয়ে যায়।