0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

چطور می‌تونم با استفاده از React Router تشخیص بدم که کاربر داره صفحه رو ترک می‌کنه؟

Detecting user leaving page with React Router

من دارم با React Router کار می‌کنم و می‌خوام وقتی کاربر صفحه رو ترک می‌کنه، یه عملیات خاصی انجام بدم. یعنی وقتی کاربر می‌خواد بره به صفحه دیگه یا بره به یه URL جدید، من باید بتونم تشخیص بدم که داره صفحه رو ترک می‌کنه و بر اساس اون یه کاری انجام بدم. چطور می‌تونم این کار رو با React Router پیاده‌سازی کنم؟

1403/06/05
پاسخ
محمدامین سعیدی راد
بیوگرافی محمدامین سعیدی راد

برای اینکه بتونی تشخیص بدی که کاربر داره صفحه رو ترک می‌کنه و یه عملیاتی رو انجام بدی، می‌تونی از قابلیت‌های React Router و React Hook به نام useEffect استفاده کنی. به طور کلی، شما باید به تغییرات مسیر توجه کنید و با استفاده از useEffect تغییرات رو نظارت کنی.

در زیر یه مثال ساده برای این موضوع داریم:

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
const App = () => {
   const history = useHistory();
  useEffect(() => {
    const handleBeforeUnload = (event) => {
    const message = 'Are you sure you want to leave?';
    event.returnValue = message;
    return message;
  };
  const handleRouteChange = (location, action) => {
    console.log('Route changed:', location, action);
  };
   window.addEventListener('beforeunload', handleBeforeUnload);
   const unlisten = history.listen(handleRouteChange);
   return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
    unlisten();
  };
  }, [history]);
  return (
    <div>
       <h1>React Router Example</h1>
    </div>
)};
export default App;

توضیحات:

  1. handleBeforeUnload: این تابع برای زمانی هست که کاربر داره صفحه رو ترک می‌کنه (مثلاً با بستن تب یا مرورگر) و می‌تونی پیغام مورد نظر رو نمایش بدی.
  2. handleRouteChange: این تابع برای زمانی که کاربر در حال تغییر مسیر درون اپلیکیشن هست، فراخوانی می‌شه. می‌تونی هر عملیاتی که نیاز داری رو اینجا انجام بدی.
  3. useEffect: این Hook به تو این امکان رو می‌ده که بشینی و گوش بدی به تغییرات و در صورت لزوم تنظیفات لازم رو انجام بدی. با استفاده از تابع cleanup، می‌تونی منابعی که استفاده کردی رو پاک‌سازی کنی تا از نشت حافظه جلوگیری بشه.

این روش، هم پیغام خروج کاربر رو مدیریت می‌کنه و هم تغییرات مسیر رو کنترل می‌کنه. امیدوارم که این توضیحات برات مفید باشه!

پاسخ: 1403/06/05
آخرین آپدیت: 1403/08/09