كيفية تنفيذ دالة عند تغير الـ route في React؟

Adam Ebrahim · 13 مايو 2021

أريد أن يتم تنفيذ دالة معينة إن قام المستخدم بالضغط على أحد الرابط وإنتقالة إلى صفحة أخرى في الموقع، أي عمل شيء يشبه حدث onUrlChange من خلال كود كالتالي:

reactRouter.onUrlChange(url => {
   console.log('URL Changed: ', url)
});

هل يمكن تنفيذ شيء كهذا في React؟

أستخدم React-router

Salah Eddin Beriani2 · 13 مايو 2021

نعم يوجد history.listen وهي تساعدك لتعرف أن route قد تغير

import React, { useEffect } from 'react';

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

const App = () => {
  const history = useHistory();

  useEffect(() => {
    return history.listen((location) => {
      console.log(`You changed the page to: ${location.pathname}`);
    });
  }, [history]);

  return <div>...</div>;
};