تم حلها: تفاعل معلمات عنوان URL لجهاز التوجيه

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

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

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

يقوم هذا الرمز بإعداد React Router لعرض صفحة باسم مستخدم من عنوان URL.

1. يستورد السطر الأول مكونات من مكتبة React Router DOM.
2. تقوم وظيفة التطبيق بإرجاع مكون جهاز التوجيه بداخله مكون توجيه ، والذي يحدد أن أي عنوان URL يبدأ بـ "/ user /" يجب أن يعرض مكون UserPage.
3. تستخدم وظيفة UserPage () useParams للحصول على اسم المستخدم من عنوان URL ثم تقوم بإرسال ترحيب باستخدام اسم المستخدم هذا.

معلمات URL

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

كيف تحصل على معلمات URL من مسار في React

في React Router ، يمكنك الوصول إلى معلمات URL من مسار باستخدام الخطاف useParams. يقوم هذا الخطاف بإرجاع كائن يحتوي على أزواج مفتاح-قيمة لمعلمات URL. على سبيل المثال ، إذا كان مسارك هو / user /: id ، يمكنك الوصول إلى معلمة id باستخدام useParams (). id.