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

Abdelrahman Mostafa10 · 31 ديسمبر 2023

React Router تقوم بتغيير عنوان URL ولكن لا يتم إعادة التصيير re-render للمكون. لقد بحثت بالفعل عن إجابة ولكن لم أجد حل للمشكلة لدي، استخدم إصدار 6 من react-router-dom.

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

class Main extends Component{
    constructor(props){
        super(props);
        this.state ={
            staffs : STAFFS
        };
    }
  
    render(){
        const StaffWithId = ({match}) =>{
            return(
                <StaffDetail staff={this.state.staffs.filter((staff) => staff.id === parseInt(match.params.staffId,10))}/>
            )
        }
        return(
            <div>
            <Header/>
                <Routes>
                    <Route exact path='/staff' element={<Stafflist staffs={this.state.staffs} />}/>
                    <Route path='/staff/:staffId' element={StaffWithId}/>
                </Routes>
            <Footer/>
      </div>
        );
    }
}

export default Main;

Kamel Mecheri · 19 يوليو

في 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، وستعمل إعادة التوجيه بشكل صحيح.

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

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

السؤال

Abdelrahman Mostafa10

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Kamel Mecheri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية