React Router: تحديد وتقييد المعلمات في توجيه المسارات
في سياق تطوير تطبيقات الويب باستخدام React و React Router ، يعتبر تحديد كيفية تقييد المعلمات في تطابق المسارات أمرًا مهمًا لضمان توجيه الزوار بشكل صحيح. عند العمل مع React Router ، يمكنك استخدام مكتبة path-to-regexp
لتحديد قواعد التطابق للمعلمات. سأقوم بشرح كيف يمكنك تحقيق ذلك.
في المثال الذي قدمته، يوجد لديك مسارين:
-
مشكلة إخراج البيانات في Unity15/03/2024
-
مشكلة تثبيت create-react-app14/03/2024
/ : alpha_index
يشير إلىChild1
/ : numeric_index
يشير إلىChild2
لمنع مثلاً "/123"
من تنشيط المسار الأول، يمكنك تحديد قاعدة لتحديد المعلمات باستخدام regex. يمكنك تحقيق ذلك عن طريق تحديد نوع المعلمة المقبولة في كل مسار.
للقيام بذلك، يمكنك استخدام الرمز :alpha_index
بناءً على regex يقبل فقط الحروف، واستخدام :numeric_index
بناءً على regex يقبل فقط الأرقام. اليك كيف يمكنك تحقيق ذلك:
jsximport { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
const Child1 = ({ match }) => (
<div>
<h2>Child1h2>
<p>Alpha Index: {match.params.alpha_index}p>
div>
);
const Child2 = ({ match }) => (
<div>
<h2>Child2h2>
<p>Numeric Index: {match.params.numeric_index}p>
div>
);
const App = () => (
<Router>
<Route
path="/:alpha_index([a-zA-Z]+)"
component={Child1}
/>
<Route
path="/:numeric_index(\d+)"
component={Child2}
/>
<Redirect from="/" to="/default" />
Router>
);
export default App;
في هذا المثال، استخدمنا ([a-zA-Z]+)
لتحديد أن :alpha_index
يقبل فقط الحروف، واستخدمنا (\d+)
لتحديد أن :numeric_index
يقبل فقط الأرقام. بهذا، سيتم منع المسار /123
من تنشيط المسار الأول، وسيتم توجيهه إلى المسار الثاني.
المزيد من المعلومات
بالتأكيد، دعنا نوسع قليلاً على الموضوع. عند استخدام React Router في تطبيقك، يصبح تحديد كيف يتم تطابق المسارات أمرًا حيويًا لضمان تجربة مستخدم سلسة وفعالة.
في المثال السابق، قمنا بتحديد مسارين مختلفين (/:alpha_index
و /:numeric_index
) باستخدام react-router-dom
. في كل مسار، قمنا بتوجيه المستخدم إلى مكون React محدد (Child1
و Child2
على التوالي).
لتوضيح الأمور أكثر، يعتمد تحديد القواعد على path-to-regexp
وهي مكتبة تُستخدم لتحويل النص إلى تعبيرات منتظمة. في حالتنا، استخدمنا قواعد الاسترجاع لتحديد نوع المعلمة التي يجب أن تتناسب معها كل مسار.
الاستخدام الذي قمنا به في المثال يُظهر كيف يمكن تحديد أن :alpha_index
يجب أن يحتوي على الحروف فقط ([a-zA-Z]+
)، بينما يجب أن يحتوي :numeric_index
على الأرقام فقط (\d+
). هذا يعني أن React Router سيتنقل إلى المكون المناسب بناءً على نوع المعلمة التي يتم توفيرها في عنوان URL.
هذا النهج يسمح لك بتنظيم تطبيقك بشكل أفضل وتحديد كيف يتفاعل المستخدم مع مختلف المسارات. يُسهم ذلك في جعل تجربة المستخدم أكثر دقة وتحكماً.