فصل المكونات عن بعضها في React

السؤال غير واضح هل تقصد جعل قسم ال about يظهر فقط عند الذهاب إلى عنوان about وال home يظهر فقط في ال home أم ماذا ؟

اجل بالظبط ولاحظ في صورة التي ارفقتها بأن قسم about داخل قسم home ولا اريد ذلك اي يعني اريد قسم about خارج home

بتاريخ 8 دقائق مضت قال Hxfhf Ucicic:

اجل بالظبط ولاحظ في صورة التي ارفقتها بأن قسم about داخل قسم home ولا اريد ذلك اي يعني اريد قسم about خارج home

إذا يجب عليك إستخدام React Route لتحقيق ذلك فأنت في ملف src\App.jsx تقوم بإتخدام مكون Home و About معا حيث تستدعي About أسفل Home . ولكن يجب عليك إستدعائه المكون عند الذهاب إلى العنوان نفسه .

فأولا يجب تثبيت الحزمة من خلال الأمر :

npm install react-router-dom

بعد ذلك نقوم بتعديل ملف App ليكون كالتالي :

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

import Navbar from "./Components/Navbar/Navbar"
import Home from "./Components/Navbar/Home/Home"
import About from "./Components/About/About"

function App() {

  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    </>
  )
}

export default App

والآن في ملف src\Components\Navbar\Navbar.jsx نقوم بتغيره إلى التالي :

import React from 'react';
import { Link } from 'react-router-dom';

import './Navbar.css';
import logo from '../../assets/logo.webp'

const Navbar = () => {
  return (
    <nav className='navbar'>
      <div className="logo">
        <img src={logo} alt="img" />
      </div>
      <div className="nav_link">
        <ul>
            <li>  <Link to="/">Home</Link> </li>
            <li>  <Link to="/about">About</Link></li>
            <li>  <Link to="/menu">Menu</Link></li>
            <li>  <Link to="/service">Services</Link></li>
            <li>  <Link to="/review">Review</Link></li>
            <li>  <Link to="/contact">Contact</Link></li>
        </ul>
      </div>
    </nav>
  )
}

export default Navbar

والآن سيتم إستدعاء كل مكون عند الذهاب إلى العنوان الصحيح.