أريد عرض مكون Header مشترك يظهر في كل المسارات باستخدام React router 6.4.0

Abdelrahman Mostafa10 · 14 يناير

لدي مشكلة في مشروع React حيث استخدم React Router الإصدار 6.4.0، وأواجه مشكلة في إنشاء مكون header مشترك يظهر عبر جميع المسارات، وقمت بإعداد RouterProvider في ملف App.js الخاص بي وتعريف مساراتي في routes.js، ولكن الـ header يظهر فقط في الصفحة الرئيسية، وليس في المكون About.

وذلك هو المكون App.js

import logo from './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";

function App() {
  return (
    <RouterProvider router={routers}>
      <div>Header</div>
      <Outlet />
    </RouterProvider>
  );
}

export default App;

routes.js

import { createBrowserRouter, redirect } from "react-router-dom";
import About from "../pages/About/About";
import Home from "../pages/Home/Home";
import { getUser, isAuthenticated } from "../sso/authUtil";

const authLoader = () => {
  if (!isAuthenticated()) {
    return redirect("https://google.com");
  } else {
    return getUser();
  }
};

export const routers = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    loader: authLoader,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

Home.js

import React from "react";
import { Link, Outlet, useLoaderData } from "react-router-dom";

const Home = () => {
  const loaderData = useLoaderData();

  return (
    <>
      <div>Header</div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <div>Home: {loaderData}</div>{" "}
      <Outlet />
    </>
  );
}
 
export default Home;

About.js

import React from "react";

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

export default About;

ما أريده هو أن يتم عرض الـ header بشكل ثابت في كل من Home وAbout،

El Sayed El Tohamy · 14 يناير

بناء على الشيفرات المكتوبة،

فإن المكون About لا يحتوي فعليًا إلا على <div> بداخلها كلمة About

أما المكون Home فيحتوي على كلمة Home ورابطين وبعض المحتوي النصي

لذلك،

إذا أردت عرض ترويسة أو تذييلة ثابتة بكل المكونات، يجب وضعها في المكون الجذري root component

إليك مثال:

// Header.js
import React from 'react';

function Header() {
  return (
    <div className="header">
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </div>
  );
}

export default Header;

وهذا تذييل

// Footer.js
import React from 'react';

function Footer() {
  return (
    <div className="footer">
      <p>© 2024 All rights reserved.</p>
    </div>
  );
}

export default Footer;

الصفحة الرئيسية

// Home.js
import React from 'react';

function Home() {
  return (
    <div className="home">
      <h2>Welcome to my website</h2>
      <p>This is a simple website built with React.</p>
    </div>
  );
}

export default Home;

صفحة من نحن

// About.js
import React from 'react';

function About() {
  return (
    <div className="about">
      <h2>About me</h2>
      <p>I am a web developer who loves React.</p>
    </div>
  );
}

export default About;

وهذا المكون الجذري

// App.js
import React from 'react';
import Header from './Header';
import Footer from './Footer';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div className="app">
      <Header />
      <Home />
      <About />
      <Footer />
    </div>
  );
}

export default App;

وبالتأكيد يمكنك استخدام مكتبات التوجيه routing كما تريد مثل المثال التالي

// App.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <div className="app">
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;

أريد عرض مكون Header مشترك يظهر في كل المسارات باستخدام React router 6.4.0

السؤال

Abdelrahman Mostafa10

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

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

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

Recommended Posts

El Sayed El Tohamy

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية