ستجد حلا: استخدم تطبيق History React Router v6

تكمن المشكلة الرئيسية المتعلقة باستخدام History React Router v6 في أنه لا يدعم التوجيه المستند إلى التجزئة. هذا يعني أن جميع عناوين URL يجب أن تكون مسارات مطلقة ، مما قد يجعل من الصعب إدارة التطبيق وصيانته. بالإضافة إلى ذلك ، لا يوجد دعم مضمّن للمسارات الديناميكية ، مما قد يمثل مشكلة عند إنشاء تطبيقات معقدة ذات صفحات متعددة. أخيرًا ، لا يوفر History React Router 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 من مكتبة React-router-dom.
// ثم ينشئ وظيفة تسمى التطبيق الذي يستخدم الخطاف useHistory لإنشاء كائن محفوظات.
// يتم استخدام كائن السجل هذا في وظيفة تسمى handleClick والتي تدفع إدخالًا جديدًا إلى مكدس المحفوظات عندما يتم استدعاؤه.
// تقوم وظيفة التطبيق بعد ذلك بإرجاع بعض JSX التي تتضمن زرًا مع معالج onClick الذي يستدعي handleClick عند النقر فوقه.
// أخيرًا ، هناك مكون سويتش بداخله مكون مسار واحد يعرض مكون NewLocation عندما يتطابق مساره مع “/ new-location”.

ما هو useHistory

useHistory هو خطاف React يتم توفيره بواسطة React Router والذي يسمح للمكونات بالوصول إلى كائن المحفوظات من أجل التنقل برمجيًا. يمكن استخدامه لدفع المواقع الجديدة إلى مكدس المحفوظات ، واستبدال الموقع الحالي ، والعودة إلى الخلف والأمام في التاريخ ، وما إلى ذلك.

كيف أحصل على سجل المسار في رد الفعل

في React Router ، يمكنك الحصول على محفوظات المسار باستخدام خطاف useHistory. يتيح هذا الخطاف الوصول إلى مثيل السجل الذي يمكنك استخدامه للتنقل والذهاب ذهابًا وإيابًا في سجل تطبيقك والمزيد. لاستخدامه ، ما عليك سوى استيراد الخطاف من React Router ثم تسميته في المكون الخاص بك:

استيراد {useHistory} من 'رد فعل جهاز التوجيه-dom'؛

const MyComponent = () => {
تاريخ const = useHistory () ؛

// يمكنك الآن الوصول إلى محفوظات المسار عبر كائن `history`.

إرجاع (…)؛
}

لا يتفاعل جهاز التوجيه استخدام سجل API

نعم ، يستخدم React Router واجهة برمجة تطبيقات HTML5 History لتتبع الموقع الحالي وتاريخه. يسمح هذا لـ React Router بتحديث الصفحة دون الحاجة إلى إعادة تحميلها ، مما يجعل التنقل أسرع وأكثر سلاسة. تسمح واجهة برمجة تطبيقات History أيضًا بالربط العميق ، مما يسهل على المستخدمين مشاركة الروابط التي تنقلهم مباشرةً إلى صفحة معينة في أحد التطبيقات.