انتقال داده بین صفحات در React Router

mohsen•1 سال قبل•1 سال قبل
ارسال شده در
react

این راهنما به شما کمک می‌کند تا داده‌ها را از یک صفحه به صفحه دیگر در React Router انتقال دهید. این مسئله به ویژه زمانی که با داده‌های API سروکار دارید، مثل نمونه کد شما که اطلاعات کاربران را از یک API دریافت می‌کند، ضروری است.

سه روش اصلی برای انتقال داده وجود دارد: استفاده از پارامترهای مسیر (path params)، استفاده از state در ناوبری، و استفاده از پارامترهای کوئری (query parameters).

روش اول: پارامترهای مسیر

این روش مناسب است زمانی که می‌خواهید یک شناسه یا مقدار مشخص را به صفحه بعدی منتقل کنید. در این روش، داده‌ها مستقیماً در آدرس URL قرار می‌گیرند.

برای ارسال داده، از لینک <Link> با یک پارامتر در مسیر استفاده کنید:

      <Link to={`/home/userDetails/${info.id}`}>
  {/* ... محتویات لینک ... */}
</Link>

در صفحه مقصد، از قلاب useParams برای بازیابی پارامتر از URL استفاده کنید:

      import { useParams } from 'react-router-dom';

function Detail() {
  const { infoId } = useParams();
  // ... استفاده از infoId برای نمایش جزئیات ...
  return (
      <div>
          {/* نمایش جزئیات کاربر با id برابر infoId */}
      </div>
  );
}

روش دوم: استفاده از

این روش برای انتقال داده‌های پیچیده تر یا زمانی که نمی‌خواهید داده‌ها در URL نمایش داده شوند، مناسب است. داده‌ها به صورت یک شیء در state قرار می‌گیرند.

برای ارسال داده، از state در مولفه <Link> یا useNavigate استفاده کنید:

      <Link to="/home/userDetails" state={{ info: info }}>
  {/* ... محتویات لینک ... */}
</Link>

یا با استفاده از useNavigate :

      const navigate = useNavigate();
navigate('/home/userDetails', { state: { info: info } });

در صفحه مقصد، از قلاب useLocation برای دسترسی به state استفاده کنید:

      import { useLocation } from 'react-router-dom';

function Detail() {
  const location = useLocation();
  const info = location.state?.info; // از عملگر optional chaining استفاده می‌شود تا اگر state وجود نداشت، خطایی ایجاد نشود.

  return (
    <div>
        {/* نمایش جزئیات کاربر با اطلاعات موجود در info */}
    </div>
  );
}

روش سوم: پارامترهای کوئری

این روش شبیه به روش اول است، اما داده‌ها به صورت پارامترهای کوئری در URL قرار می‌گیرند. این روش برای انتقال داده‌های کمتر حساس یا داده‌هایی که می‌خواهید در URL قابل مشاهده باشند مناسب است.

برای ارسال داده‌ها از search در مولفه <Link> یا useNavigate استفاده کنید:

      <Link
  to={{
    pathname: '/home/userDetails',
    search: `?infoId=${info.id}`,
  }}
>
  {/* ... محتویات لینک ... */}
</Link>

یا با استفاده از useNavigate و createSearchParams:

      const navigate = useNavigate();
navigate({
  pathname: '/home/userDetails',
  search: createSearchParams({ infoId: info.id }),
});

در صفحه مقصد، از قلاب useSearchParams برای دسترسی به پارامترها استفاده کنید:

      import { useSearchParams } from 'react-router-dom';

function Detail() {
  const [searchParams] = useSearchParams();
  const infoId = searchParams.get('infoId');
  // ... استفاده از infoId برای نمایش جزئیات ...
  return (
      <div>
          {/* نمایش جزئیات کاربر با id برابر infoId */}
      </div>
  );
}

استفاده در کامپوننت‌های کلاسیک:

اگر از کامپوننت‌های کلاسیک React استفاده می‌کنید، می‌توانید از روش‌های مشابه استفاده کنید، اما باید از this.props.location.state برای دسترسی به state و از this.props.match.params برای دسترسی به پارامترهای مسیر استفاده کنید. توجه داشته باشید که در react-router-dom@6 باید withRouter را به صورت دستی پیاده‌سازی کنید.

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

رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!