كيفية إستخدام React Router في المشروع

أولا لاحظ أنه يوجد مشكلة لديك في ملف src\App.jsx حيث أنك وضعت Routes بخارج BrowserRouter ويجب أن يكون بداخلها.

لقد إستطعت بنفسك إنشاء مسار Navbar وسيعمل معك الآن . ولكن لاحظ أنه لايجب أن يكون هناك مسار لعرض شريط التنقل بل يجب أن يكون مكون وصفحة كاملة.

وإليك هذا الكود بعد التعديل :

import React, { useEffect, useState } from "react"
import Navbar from "./Components/Navbar/Navbar";
import About from "./Components/About/About";
import Hero from "./Components/Hero/Hero";
import {Routes , Route, BrowserRouter} from 'react-router-dom';
import Background from "./Components/Background/Background";
function App() {
  let heroData = [
    {text1: 'Titanium' , text2: 'color'},
    {text1: 'Fast and ' , text2: 'powerful'},
    {text1: 'Practical and' , text2: 'attractive'},
  ]
  const [heroCount , setHeroCount] = useState(1);
  const [playStatus , setPlayStatus] = useState(false);  

 useEffect(() => {
    setInterval(() => {
      setHeroCount((count) => {return count === 2?0:count+1})
    }, 4000);
  },[])
  return (
    <>
      <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/about" element={<About />}/>
        <Route path="/service" element={<About />}/>
        <Route path="/contact" element={<About />}/>
      </Routes>
      </BrowserRouter>

     <div>
      <Background playStatus={playStatus} heroCount={heroCount}/>
      <Hero 
      heroData={heroData[heroCount]}
      heroCount={heroCount}
      playStatus={playStatus}
      setHeroCount={setHeroCount}
      setPlayStatus={setPlayStatus}
      />
     </div>
   </>
  )
}

export default App

الآن في ملف src\Components\Navbar\Navbar.jsx يوجد مشكلة لديك في أنك تستخدم العنصر a وهذا خاطئ فلاحظ عند الضغط عليه يقوم مباشرة بإعادة تحديث الصفحة والذهاب للعنوان الجديد . ولكننا لا يجب أن نقوم بذلك لأننا نستخدم React ونبني Single Page Application أى لا يجب أن يكون هناك تحدث للصفحة.

لهذا يجب إستخدام Link من react-router-dom لتقوم بالتوجيه بدلا منا هكذا :

import React from 'react'
import './Navbar.css';
import logo from '../../assets/logo.png'
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <div>
      <div className="navbar">
        <div className="logo">
          <img src={logo} alt="" />
        </div>
        <div className="nav-list">
          <ul>
            <li>  <Link to="/">Home</Link> </li>
            <li>  <Link to="/about">About</Link></li>
            <li>  <Link to="/service">Services</Link></li>
            <li>  <Link to="/contact">Contact</Link></li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default Navbar

الآن لاحظ بمجرد الضغط على زر التنقل لا يتم تحديث الصفحة بل يتم التوجه مباشرة وتغير العنوان دون إعادة تحديث الصفحة.