ارسال پارامترهای چندگانه مسیر در React — به زبان ساده

شاید برای شما نیز پیش آمده باشد که بخواهید بیش از یک پارامتر را در یک مسیر URL ری‌اکت ارسال کنید تا بتوانید به آن پارامترها در زمان ریدایرکت دسترسی داشته باشید. در این راهنما با روش ارسال پارامترهای چندگانه مسیر در React آشنا خواهیم شد. فرض کنید مشغول ساخت یک پروژه دمو هستید که روش‌های مختلف طراحی وب واکنش‌گرا با React را نمایش می‌دهد و به این منظور از API مربوط به Movie Database (+) استفاده می‌کنید تا داده‌های فیلم‌ها را در اختیار پروژه فرانت‌اند ری‌اکت قرار دهید.

در این پروژه می‌خواهیم کاربر فهرستی از ژانرهای فیلم (اکشن، ماجرایی، کمدی و غیره) ببیند، روی ژانر کلیک کند و به فهرستی از فیلم‌ها که در آن ژانر جای می‌گیرند بروید. به نظر فرایند سرراستی می‌رسد.

با ین که پروژه ساده‌ای به نظر می‌رسد، اما تنها اشکال اینجا است که API فیلم فهرست فیلم‌ها را بر اساس ژانر ارائه می‌کند، برای واکشی داده‌ها به یک genreId نیاز دارد، در حالی که ما می‌خواهیم فهرست فیلم‌ها را بر اساس نام ژانر (genreName) به کاربران نشان دهیم که عملاً روی آن در فهرست تولید شده کلیک کرده‌اند. مشکل از همین جا آغاز می‌شود.

دو بخش مختلف داده‌ای که هر دو از سوی کامپوننت‌های متفاوت و نامرتبط در زمان ریدایرکت از کامپوننت Genres به کامپوننت خاص GenreList و نمایش فیلم‌های مرتبط با ژانر مورد نیاز هستند. بنابراین ارسال داده‌ها از طریق props مانند کاری که در مورد کامپوننت‌های فرزند انجام می‌دهیم موضوعیت ندارد. بنابراین در این مقاله با روش افزودن و دسترسی متعاقب به پارامترهای چندگانه در یک پروژه ری‌اکت در زمان ریدایرکت با استفاده از react-router-dom (+) که محبوب‌ترین روتر برای اپلیکیشن‌های ری‌اکت است آشنا خواهیم شد.

روترهای ری‌اکت و پارامتر مسیر

پیش از آن که به ادامه مطلب بپردازیم، ابتدا باید مفهوم مسیر و پارامترهای مسیر را در ری‌اکت توضیح دهیم تا اگر آشنایی کمی دارید، بهتر آشنا شوید. به این منظور از یک پروژه دمو که در بخش قبل توضیح دادیم، استفاده می‌کنیم. در صورتی که علاقه‌مند هستید کد کامل آن را ببیند می‌توانید به این ریپوی گیت‌هاب (+) مراجعه کنید. اگر با طرز کار مسیریابی در ری‌اکت آشنا نیستید، پیشنهاد می‌کنیم ابتدا مستندات react-router-dom (+) را مطالعه کنید.

فیلم آموزش ری اکت روتر React Router برای مسیریابی بین صفحات وب در فرادرس

کلیک کنید

مسیرها

مسیرها برای تعیین روش رسیدن به کامپوننت‌های مختلف در اپلیکیشن ری‌اکت استفاده می‌شوند. زمانی که کاربری روی یک لینک به یک صفحه کلیک می‌کند یا روی دکمه‌ای که او را به صفحه دیگری می‌برد کلیک می‌نماید، روتر اقدام به رندر کردن </ Route> برای آن کامپوننت می‌کند. برای نمونه مسیر صفحه Genred در اپلیکیشن ما به صورت زیر است:

1<Route exact path="/genres" component={Genres} />

این یک URL مسیر استاتیک در ری‌اکت محسوب می‌شود که صرف‌نظر از این که کدام کاربر صفحه را می‌بیند و از کجا آمده است، همواره یکسان باقی می‌ماند. مهم نیست که چه کسی این کار را انجام می‌دهد، هر زمان که کسی روی لینکی به صفحه Genres کلیک کند، از این مسیر برای رسیدن به آن صفحه استفاده خواهد شد و همواره کامپوننت یکسانی را رندر می‌کند و بدین ترتیب هیچ محتوای دینامیکی مورد نیاز نیست.

پارامترهای مسیر

«پارامترهای مسیر» (Route params) به پارامترهایی گفته می‌شود که مقادیر آن‌ها به صورت دینامیک در یک URL صفحه قرار دارند. به این ترتیب یک مسیر می‌تواند در حالی که بخش دینامیک URL را به آن کامپوننت ارسال می‌کند، همان کامپوننت را رندر کند، به طوری که بتواند داده‌هایش را بر مبنای پارامتر تغییر دهد.

مثال‌هایی از پارامترهای مسیر URL که احتمالاً تشخیص می‌دهید شامل مواردی از قبیل ID برای محصول‌ها، کتاب‌ها، کاربران و یا در این مورد فیلم‌ها است. دست کم در زمان استفاده از ری‌اکت برای دریافت جزییات آیتم صحیح، کامپوننت دینامیک به ID یکتا و خاص آن محصول نیاز دارد تا بتواند داده‌های صحیح برای نمایش دریافت کند. مسیر MovieDetailsContainer با پارامترهای URL دینامیک در اپلیکیشن ما به صورت زیر است:

1<Route exact path="/movie/:id" component={MovieDetailsContainer} />

این نمونه‌ای از یک مسیر به‌روزرسانی به صورت دینامیک است. بخش نخست path یعنی بخش "/movie/” تغییر نمی‌یابد، اما:id یک پارامتر مسیر است که به صورت دینامیک تعیین شده است و به طور معمول در نتیجه یک اکشن کاربر مانند کلیک کردن روی یک لینک یا وارد کردن یک ورودی و کلیک روی دکمه جستجو تولید می‌شود.

این بخشی است که تغییر می‌یابد و موجب می‌شود که MovieDetailsContainer با ID فیلم رندر شود. سپس کامپوننت این بخش را از مسیر URL بیرون می‌کشد و زمانی که رندر شود، جزییاتی که آن فیلم خاص دارد را به کاربر نمایش می‌دهد.

انتساب پارامترهای مسیر دینامیک در یک کامپوننت

به طور معمول کامپوننتی که در زمان ریدایرکت رندر می‌شود، از طریق URL به مسیر دینامیک که نیاز دارد دسترسی می‌یابد. پارامتر مسیر دینامیک در یک URL به صورت زیر است:

this.props.match.params.id

درون یک کامپوننت React که به داده‌های مسیر URL نیاز دارد، از این کد برای دسترسی به ID واقعی مسیر استفاده می‌شود و به صورت یک placeholder در آدرس مسیر به صورت :id نمایش می‌یابد. بنابراین تا اینجا متوجه شدیم که برای دسترسی به داده‌ها باید از به‌روزرسانی قالب‌های ری‌اکت react-router-dom استفاده کنیم. از اینجا به بعد از آن می‌توان برای تعیین حالت کامپوننت لوکال، برای واکشی داده‌ها، رندر کردن در JSX و مواردی از این دست استفاده کرد.

راه‌اندازی مسیر دینامیک جدید

اکنون تصور کنید در همان صفحه وب‌سایت هستیم، مسیرها روشن هستند، پارامترهای مسیر روشن است، دسترسی به این پارامترها از یک کامپوننت که کاربر به آن ریدایرکت شده است نیز روشن است. تنها نکته‌ای که همچنان روشن نیست، این است که اگر بیش از یک پارامتر مسیر به path آن اضافه شده باشد، چه کار باید کرد؟ با دانستن اطلاعات فوق می‌توانیم تلاش کنیم مسیر را برای کامپوننت GenreList ایجاد کنیم این همان کامپوننتی است که فهرست فیلم‌های مرتبط با یک ژانر خاص را با استفاده از دو پارامتر دینامیک genreName: و ‎:genreId نمایش می‌دهد.

نکته: همه مسیریابی‌های واقعی ما برای اپلیکیشن در فایل App.js درون پوشه src قرار دارد. این فایل هم اینک به صورت زیر است:

1<Route
2  exact
3  path="/genres/:genreName/:genreId"
4  component={GenreList}
5/>

این نخستین گام مدیریت مسیری است که شامل بیش از یک پارامتر مسیر است. گام بعدی تعیین ID ژانر و نام ژانر در کامپوننت Genres است.

افزودن بیش از یک پارامتر مسیر در یک URL

کامپوننت Genres علاوه بر موارد مختلف شامل دو شیء حالت است. یک شیء به نام selectedGenre عددی است که در ابتدا روی 0 تنظیم شده است و شیء دیگر به نام selectedGenreName یک رشته است که در ابتدا به صورت ‘’ تعیین شده است. این دو بخش‌هایی از حالت هستند که به وسیله کلیک کاربر روی فهرست ژانر ایجاد می‌شوند. به محض این که کاربر روی یک ژانر منفرد کلیک کند، ID آن و نامش در حالت کامپوننت Genres تعیین می‌شود. بدین ترتیب تابع ()renderRedirect که در ادامه می‌بینید تحریک می‌شود و کاربر را به کامپوننت GenresList ریدایرکت می‌کند که از سوی مسیر تعریف شده است. this.state.selectedGenreName به صورت یک placeholder به نام ‎:genreName.this.state.selectedGenre درج شده است که با placeholder دیگری به نام ‎:genreId جایگزین می‌شود.

فایل Genres.js

1renderRedirect = () => {
2  if (this.state.selectedGenre !== 0 && this.state.selectedGenreName !== '') {
3    return (
4      <Redirect 
5        to={`/genres/${this.state.selectedGenreName}/${this.state.selectedGenre}`}
6      />
7    );
8  }
9};

گام دوم اینک تکمیل شده است. یک ID ژانر خاص که کامپوننت GenreList برای واکشی فیلم‌های آن ژانر نیاز دارد به عنوان بخشی از URL ارسال می‌شود و نام ژانر نیز جهت نمایش ژانری که کاربر فیلم‌هایش را می‌بیند در URL گنجانده شده است. در ادامه کامپوننت را ریدایرکت می‌کنیم تا این داده‌ها را بخواند.

دسترسی به پارامترهای مسیر از یک URL

در آخرین گام پروژه خود کامپوننت به GenreList ریدایرکت می‌شود و باید بخش‌های متفاوت مسیر دینامیک React را به دست آورد. به genreId برای واکشی فهرست فیلم‌ها از API Movie Database نیاز داریم که با this.props.match.params.genreId به دست می‌آید و به genreName برای نمایش JSX کامپوننت نیاز داریم که نام ژانری که کاربر روی آن کلیک کرده را نمایش می‌دهد و از طریق this.props.match.params.genreName مورد دسترسی قرار می‌گیرد.

فایل GenreList.js

1if (this.props.match.params) {
2  try {
3    const movies = await movieAPI.getMoviesByGenre(
4      this.props.match.params.genreId,
5    );
6    this.setState({ movies, loading: false });
7  } catch (err) {
8      this.setState({ loading: false, error: true });
9    }
10  }
11}
12render() {
13  return (
14    <>
15      <div className="genre-search-title" onClick={() => this.props.history.push('/genres')} >
16        <div>
17          <i className="fa fa-chevron-left" aria-hidden="true" />
18          <p>Back to Genres</p>
19        </div>    
20        <h1>{this.props.match.params.genreName} Movies</h1>
21      </div>
22      <MovieList
23       loading={this.state.loading}
24       error={this.state.error}
25       movies={this.state.movies}
26      />
27    </>
28  );
29}

شاید شما هم با ما موافق باشید که کد فوق به عنوان یک کد ریدایرکت ساده است. صرفاً با استفاده از ساختار پارامترهای مسیر URL خاص (...this.props.match.params) و ارسال نام متغیر متناظر (genreId یا genreName) می تونیم مقدار صحیح را به دست آوریم. این نوع از کارها می‌توانند هر جایی که به داده‌های دینامیک نیاز داریم در زمان ریدایرکت از یک کامپوننت به کامپوننت نامرتبط دیگر مورد استفاده قرار گیرند.

سخن پایانی

ریدایرکت های دینامیک، رخدادهای تقریباً رایجی در وب‌اپلیکیشن‌ها محسوب می‌شوند و اپلیکیشن‌های ری‌اکت نیز از این قاعده مستثنی نیستند، اما علی‌رغم این واقعیت، بسیاری از افراد با روش مدیریت آن‌ها آشنا نیستند. همچنین مثال‌هایی از ریدایرکت با بیش از یک بخش داده دینامیک نادر هستند و همین موضوع انگیزه نگارش این راهنما بوده است.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در این مقاله با کمک مسیرهای react-router-dom و پارامترهای دینامیک، دیدیم که ارسال بخش‌های مختلف داده‌ای به یک کامپوننت از کامپوننت نامرتبط دیگر کار چندان دشواری نیست.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌نویسی
• آموزش JavaScript ES6 (جاوا اسکریپت)
• ری اکت (React) — راهنمای جامع برای شروع به کار
• آموزش ری اکت (React) — مجموعه مقالات مجله فرادرس

==