لقد قمت بإنشاء تطبيق رد فعل حيث لدي ملف يتعامل مع المسارات. كل شيء يعمل بشكل جيد، useEffect يجلب تغيرات المسار إذا بدأنا من المسار الجذر، وهو في هذه الحالة هو "/dashboard"، ومن هنا يتعامل مع تغيرات المسار عندما ينقر المستخدم في قائمة مختلفة، والمشكلة هي، إذا كنا صعبين قم بتحديث الصفحة باستخدام ميزة تحديث المتصفح وفشل في جلب أي شيء. هل يمكنك إصلاح هذا الكود حتى لا يحدث هذا؟

استيراد React، { useEffect، useCallback } من "react"
استيراد {setCurrentRouteKey} من '@/Store/base/commonSlice'
استيراد { useSelector، useDispatch } من "react-redux"
استيراد { useLocation } من "react-router-dom"

const AppRoute = ({ المكون: المكون، مفتاح الطريق، ... الدعائم }) => {
 موقع ثابت = useLocation()

 إرسال ثابت = useDispatch()

 const LayoutType = useSelector((state) =>state.theme.layout.type)
 const PreviousLayout = useSelector((state) =>state.theme.layout.previousType)
 
 const HandleLayoutChange = useCallback(() => {
 إرسال (setCurrentRouteKey(routeKey))

 إذا (props.layout &&props.layout !== LayoutType) {
 الإرسال (setPreviousLayout (layoutType))
 إرسال (setLayout (props.layout))
 }

 إذا (!props.layout && PreviousLayout && Layout !== PreviousLayout) {
 إرسال (setLayout (التخطيط السابق))
 إرسال (setPreviousLayout(''))
 }
 }، [dispatch، LayoutType، PrevLayout، Props.layout، RouteKey])؛

 // https://stackoverflow.com/questions/67133211/why-doesnt-useeffect-hook-work-on-page-refresh
 //

 استخدام التأثير (() => {
 console.log("تغيير التخطيط");
 console.log(Component, RouteKey,props, location);
 مقبضLayoutChange()
 }، [location.key، HandleLayoutChange])

 يعود (
 
 )
}

تصدير AppRoute الافتراضي
{"source": "ewof/sharegpt-instruct-unfiltered-deduped", "kind": "human", "evolved_from": null}