يتم تغيير المسار بواسطة React router لكن لا يتم إعادة التصيير re-render

في React Router v6، تم تعديل الكثير من الأمور التي كانت موجودة في الإصدارات السابقة، بما في ذلك كيفية التعامل مع المعلمات في المسارات وتوجيه المكونات. إحدى المشكلات الشائعة هي أنه لا يتم إعادة تصيير المكونات بشكل صحيح عند تغيير عنوان URL.

في الكود الذي قدمته، هناك بعض التعديلات التي يجب إجراؤها لتتناسب مع React Router v6 وتحديث مكوناتك.

التعديلات المطلوبة

تحديث دالة StaffWithId: في React Router v6، لم يعد هناك match مثلما كان في الإصدارات السابقة. بدلاً من ذلك، يمكنك استخدام useParams للحصول على المعلمات من URL.

تحديث Redirect: Redirect لم يعد موجودًا في React Router v6. يمكنك استخدام مكون Navigate بدلاً منه.

الكود المعدل

import React, { Component } from 'react';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import { Routes, Route, Navigate, useParams } from 'react-router-dom';
import Stafflist from './StaffComponent';
import { STAFFS } from '../shared/staffs';
import StaffDetail from './StaffDetailComponent';

// تعريف مكون دالة للعرض عند وجود معلمة في URL
const StaffWithId = ({ staff }) => {
    const { staffId } = useParams();
    const staffDetails = staff.find((s) => s.id === parseInt(staffId, 10));
    return staffDetails ? <StaffDetail staff={staffDetails} /> : <Navigate to="/staff" />;
};

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            staffs: STAFFS
        };
    }

    render() {
        return (
            <div>
                <Header />
                <Routes>
                    <Route path='/staff' element={<Stafflist staffs={this.state.staffs} />} />
                    <Route path='/staff/:staffId' element={<StaffWithId staff={this.state.staffs} />} />
                </Routes>
                <Footer />
            </div>
        );
    }
}

export default Main;

الشرح :

StaffWithId: تم تحويله إلى مكون دالة خارج Main وتحديثه لاستخدام useParams للحصول على staffId من URL. كما يتم استخدام Navigate لإعادة التوجيه في حالة عدم وجود تفاصيل الموظف.

Routes: استخدم element مع المكونات بدلاً من component، حيث element يجب أن يكون عنصر JSX.

بهذه الطريقة، سيتم إعادة تصيير المكون StaffDetail بشكل صحيح عند تغيير عنوان URL، وستعمل إعادة التوجيه بشكل صحيح. 

أتمنى أن يكون هذا قد ساعدك.