عند استخدام React Router وتحديدًا عند استخدام browserHistory.push()
للانتقال إلى مسار جديد، يمكنك تمرير معلمات الطريق (route parameters) باستخدام الكائن الثاني في دالة push()
. على سبيل المثال، إذا كان لديك مسارًا مثل /user/:userId
حيث تريد تمرير userId
كمعلمة، يمكنك القيام بذلك على النحو التالي:
javascriptimport { browserHistory } from 'react-router-dom';
// في مكان مناسب داخل المكون الخاص بك
browserHistory.push(`/user/${userId}`);
في هذا المثال، يتم استخدام browserHistory.push()
للانتقال إلى مسار /user/:userId
حيث يتم استبدال :userId
بقيمة المعلمة userId
التي تم تمريرها.
-
تحسين الأمان في نظام التصويت12/04/2024
-
تحويل سلسلة النص إلى تاريخ Util في Java04/02/2024
إذا كنت تواجه مشكلة في الحصول على قيم المعلمات في المكون الجديد، يمكنك استخدام this.props.match.params
بدلاً من this.props.routeParams
. فمثلاً، إذا كنت تحاول الوصول إلى userId
في المكون الذي يتلقى المسار /user/:userId
، يمكنك القيام بذلك كالتالي:
javascriptconst { userId } = this.props.match.params;
هذا الكود يستخدم match.params
للوصول إلى قيمة userId
المحددة في المسار. يجب أن تكون متأكدًا من أن المكون الذي تريد الوصول إليه يتم تمريره كمكون مباشر لـ Route
في تعريف التوجيه الخاص بك ليتم استخدام match.params
بشكل صحيح.
إذا لم يكن لديك تجربة جيدة مع browserHistory.push()
، يمكنك استخدام من React Router للتنقل بين المسارات بشكل أسهل وأكثر تكاملًا.
المزيد من المعلومات
عند استخدام React Router، يمكنك تمرير المعلمات إما كجزء من عنوان URL أو كمعلمات منفصلة. في حالة استخدام browserHistory.push()
، يتم تمرير المعلمات كجزء من العنوان URL. على سبيل المثال، إذا كان لديك مسارًا مثل /user/:userId
وتريد تمرير userId
كمعلمة، يمكنك القيام بذلك عن طريق تضمين قيمة userId
في العنوان URL عند استدعاء push()
.
بعد تمرير المعلمات، يمكنك الوصول إليها في المكون الجديد باستخدام this.props.match.params
. على سبيل المثال، إذا كان لديك مسار /user/:userId
، يمكنك الوصول إلى قيمة userId
كما يلي:
javascriptconst { userId } = this.props.match.params;
هذا الكود يستخدم match.params
للوصول إلى قيمة userId
المحددة في المسار.
إذا كنت تفضل تمرير المعلمات كمعلمات منفصلة بدلاً من تضمينها في العنوان URL، يمكنك استخدام الكائن الثاني في push()
لتمرير معلمات إضافية. على سبيل المثال:
javascriptimport { browserHistory } from 'react-router-dom';
// تمرير المعلمات كمعلمات منفصلة
browserHistory.push({
pathname: '/user',
state: { userId: '123' }
});
ثم يمكنك الوصول إلى قيمة userId
في المكون الجديد باستخدام this.props.location.state.userId
.
من الجدير بالذكر أن استخدام state
لتمرير المعلمات لا يتيح الوصول إليها إلا من خلال المكون الجديد المحدد في push()
، ولا يتم تضمينها في عنوان URL.