اذهب إلى المحتوى
  • 0

مشكلة في react-router-dom v6.10

Mohamed Boumlik

السؤال

في الاونة الاخيرة كنت اعمل على مشروع خاص بي protfilio 

و اردت ان اعمل ب react ,webpack

كنت اعمل جيدا الا ان لاحظت ان webpack ليس موجودا ,كما واجهتني بعض المشاكل بال components حيث لم اضع لها path خاص بها ب react router 

فمسحت المشروع عن بكرة ابه 

واعدت مشروعا جدبدا 

و تفادية اخطاء كثية و عدلت webpack configuration في حالة الصور و fonts 

الى ان قدمت ل react router فوجدت مشكلة با path 

HomePage.jsx-porfilio-VisualStudioCode4_15_20238_02_17AM.thumb.png.e6af845038ea098e96d2984eb2eaf2ad.png

في الاول ظهر المشكل عند التعديل عن الرابط الخاص بHomePage حيت كان HomePage.jsx-porfilio-VisualStudioCode4_15_20238_03_31AM.thumb.png.a586a873f09cdc2915c7c784bb37b8a9.png

import HomePage from './HomePage';
هنا كانة تظهر مشكلة وحيدة وهي ان
path غير صحيح
بعد تعديله الى 
import HomePage from './pages/HomePage';
وهو الباث الصحيح ظهرت 4 مشاكل متعلقة بالباث و 
react router

ساترك ملف المشروع 

ساكون شاكرا ادا وجد الحل 

رمضان مبارك . سلام

portfilio.rar

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال وكتابة رقم الإصدار
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

المشكلة انك تستخدم اصدار حديث من react-router-dom والذي لم يعد يدعم الوظيفة Switch ولا Redirect، ونستخدم Routes بدلاً عنها ولذلك يجب ان تقوم بتعديل الكود :

import React from 'react';
import { BrowserRouter,Switch, Route } from 'react-router-dom';
import HomePage from './HomePage';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={HomePage} />
        {/* Other routes here */}
      </Switch>
    </BrowserRouter>
  );
}

export default App;

للشكل التالي :

import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import HomePage from './pages/HomePage';
import './App.css';

function App() {
	return (
		<BrowserRouter>
			<Routes>
				<Route exact path="/" element={HomePage} />
				<Route path="*" element={<Navigate replace to="/" />} />
				{/* Other routes here */}
			</Routes>
		</BrowserRouter>
	);
}

export default App;

وكذلك هنالك مشكلة في الـ HomePage.jsx حيث لا يمكن استخدام الـ Routes اكثر من مرة داخل التطبيق، وكذلك هنالك مشكلة ثانية وهي انك كنت تستدعي الـ App داخل الـ HomePage والـ HomePage داخل الـ App.

ولحل المشكلة جرب تعديل الكود في HomePage للشكل :

import React from 'react';
import ButtonTest from './btnPage';

const HomePage = () => {
	return (
		<div>
			<ButtonTest />
		</div>
	);
};

export default HomePage;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

بالنسبة لإصدار react-router-dom": "^6.10.0 الذي تقوم باستخدامه، فالطريقة الصحيحة لكتابة الكود في ذلك الإصدار هي كالتالي:

 استيراد المكتبة في الملف الرئيسي لتطبيق React باستخدام الأمر التالي:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

الآن، يمكن استخدام Routes component لتحديد المسارات والعناوين المطابقة لها، ن خلال استخدام Route component داخل Routes لتحديد مكان عرض المكون الخاص بالمسار المحدد.

ولاحظ أنه تم استيراد BrowserRouter as Router.

ويمكن استخدام BrowserRouter أو HashRouter كمكون رئيسي لتحديد أسلوب توجيه المسارات في تطبيق React.

حيث BrowserRouter يعتمد على تاريخ المتصفح ويستخدم رابط URL كمفتاح رئيسي لتوجيه المستخدمين إلى الصفحات المحددة. ولكن يجب على المستخدمين الذين يريدون الوصول إلى صفحة محددة في التطبيق مشاركة الرابط URL الذي يحتوي على المسار.

أما HashRouter يستخدم التجزئة (#) في عنوان URL لتوجيه المستخدمين إلى الصفحات المحددة ولا يتطلب مشاركة رابط URL كامل للصفحة.

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

يتم تحديد مسار الصفحة الرئيسية باستخدام العنوان '/' وعرض المكون Home. ومسار الصفحة About بواسطة العنوان '/about' ويعرض المكون About.

ومسار الصفحة Contact بواسطة العنوان '/contact' ويتم عرض المكون Contact،  وأخيراً، يتم تحديد مسار الصفحة التي لا تتطابق مع أي من المسارات السابقة باستخدام العنوان '*' وعرض المكون NotFound.

علاوة على ذلك، باستطاعتك استخدام Navigate component بدلاً من Redirect component في React Router v6 لتحويل المستخدمين إلى صفحات أخرى.

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

function Home() {
  return <Navigate to="/about" />;
}

استخدمت Navigate component لتحويل المستخدمين إلى صفحة About باستخدام العنوان '/about'.

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

التعديلات التي يجب تنفيذها نتيجة الإصدار الأحدث react-router-dom v6.10 هي كالتالي

  • استخدام العنصر element بدلاً من component في Route: في react-router-dom v6، استخدمت العناصر element بدلاً من component في Route. لذلك، يجب تعديل الكود ليستخدم العنصر element على النحو التالي:
    <Route path="/" element={<App />} />
    <Route path="/btn_test" element={<BtnTest />} />
  • يفضل تعديل اسم الملف:  تم استخدام اسم ملف btn_test لمكون BtnTest. ومن المفترض أن يتبع معايير تسمية الملفات في React والتي تفرض أن يتم استخدام CamelCase لتسمية الملفات. لذلك، يجب تغيير اسم الملف إلى BtnTest.
  • استخدام Navigate بدلاً من Redirect: في react-router-dom v6، يجب استخدام Navigate بدلاً من Redirect. لذلك، يجب تعديل الكود ليستخدم Navigate على النحو التالي:

    <Route path="*" element={<Navigate to="/" replace />} />
  • في react-router-dom v6، تم إلغاء Switch واستبداله بـ Routes، والذي يعمل بطريقة مشابهة لكنه يستخدم بنية أكثر تركيزًا على العناصر الفرعية والتحكم في المسارات.
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...