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

المشكلة انك تستخدم اصدار حديث من 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;

بالنسبة لإصدار 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'.

التعديلات التي يجب تنفيذها نتيجة الإصدار الأحدث 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، والذي يعمل بطريقة مشابهة لكنه يستخدم بنية أكثر تركيزًا على العناصر الفرعية والتحكم في المسارات.