تمرير معلمات المسار في React Router

عند استخدام React Router وتحديدًا عند استخدام browserHistory.push() للانتقال إلى مسار جديد، يمكنك تمرير معلمات الطريق (route parameters) باستخدام الكائن الثاني في دالة push(). على سبيل المثال، إذا كان لديك مسارًا مثل /user/:userId حيث تريد تمرير userId كمعلمة، يمكنك القيام بذلك على النحو التالي:

javascriptCopy code
import { browserHistory } from 'react-router-dom';

// في مكان مناسب داخل المكون الخاص بك
browserHistory.push(`/user/${userId}`);

في هذا المثال، يتم استخدام browserHistory.push() للانتقال إلى مسار /user/:userId حيث يتم استبدال :userId بقيمة المعلمة userId التي تم تمريرها.

إذا كنت تواجه مشكلة في الحصول على قيم المعلمات في المكون الجديد، يمكنك استخدام this.props.match.params بدلاً من this.props.routeParams. فمثلاً، إذا كنت تحاول الوصول إلى userId في المكون الذي يتلقى المسار /user/:userId، يمكنك القيام بذلك كالتالي:

javascriptCopy code
const { 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 كما يلي:

javascriptCopy code
const { userId } = this.props.match.params;

هذا الكود يستخدم match.params للوصول إلى قيمة userId المحددة في المسار.

إذا كنت تفضل تمرير المعلمات كمعلمات منفصلة بدلاً من تضمينها في العنوان URL، يمكنك استخدام الكائن الثاني في push() لتمرير معلمات إضافية. على سبيل المثال:

javascriptCopy code
import { browserHistory } from 'react-router-dom';

// تمرير المعلمات كمعلمات منفصلة
browserHistory.push({
  pathname: '/user',
  state: { userId: '123' }
});

ثم يمكنك الوصول إلى قيمة userId في المكون الجديد باستخدام this.props.location.state.userId.

من الجدير بالذكر أن استخدام state لتمرير المعلمات لا يتيح الوصول إليها إلا من خلال المكون الجديد المحدد في push()، ولا يتم تضمينها في عنوان URL.