تغير عنوان الصفحة في React

Zen Eddin Allaham · 29 يونيو

توجد مشكلة في مشاريع رياكت

حيث حاليا انا اقوم بانشاء مشروع صفحة واحدة

لكن اريد تغيير title الخاص ب html في كل صفحة

كيف يمكن ذلك حيث لا يوجد سوه ملف html واحد فقط هل سأستعمل في هذا الحل routing

ايضا اريد عند تنقل في اي صفحة تبقا شريط التنقل navbar مفعلة في جميع الصفحات

محمد_عاطف · 29 يونيو

توجد عدة طرق لذلك بجانب إستخدام مكتبة React Router لإدارة التنقل بين الصفحات (Routes).

حيث يجب تغير العنوان url لتغير title الصفحة فلا يمكنك إستخدام أكثر من title لنفس العنوان فهذا ليس أفضل شئ.

الطريقة الأولى لتغيير title لكل صفحة دون تعديل ملف HTML مباشرة، يمكنك استخدام مكتبة مثل react-helmet أو react-helmet-async لإدارة العناصر في <head>.

فأولا يجب أن تقوم بتثبيت المكتبة باستخدام الأمر:

npm install react-helmet-async

بعد ذلك في ملف index.js أو App.js، قم بتغليف التطبيق بمكون HelmetProvider:

import { HelmetProvider } from 'react-helmet-async';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HelmetProvider>
    <Router>
      <App />
    </Router>
  </HelmetProvider>
);

وفي كل مكون (صفحة) يمكنك إستخدام Helmet لتحديد العنوان. فمثلا:

import { Helmet } from 'react-helmet-async';

function Home() {
  return (
    <div>
      <Helmet>
        <title>Home Page</title>
      </Helmet>
      <h1>Home Page</h1>
    </div>
  );
}

والطريقة الثانية لتغيير title بدون react-helmet حيث يمكنك تغيير العنوان مباشرة باستخدام document.title في useEffect:

import { useEffect } from 'react';

function Home() {
  useEffect(() => {
    document.title = 'Home Page';
  }, []);

  return <h1>Home Page</h1>;
}

Zen Eddin Allaham · 29 يونيو

عند تنفيذ هذه الامر

npm install react-helmet-async

يظهر خطأ

Mustafa Mahmoud7 · 29 يونيو

أولا بما أنك تعمل على مشروع عبارة عن صفحة واحدة هل هناك هدف لتغيير العنوان حيث تذكر بعد ذلك أنه لديك أكثر من صفحة.
أفترض انك لديك مشروع رياكت عبارة عن SPA وقمت بتثبيت مكتبة react-router من خلالها تستطيع التنقل بين الصفحات.

في تطبيقات React التي هي عبارة عن صفحة واحدة (Single Page Application) فعلا بيكون عندك ملف index.html واحد فقط وذلك معناه إن عنوان الصفحة (<title>) لا يتغير تلقائي عندما تنتقل بين الصفحات (Routes) لأنه لا يوجد reload بيحصل للصفحة.
لذلك الحل هو إنك تغير العنوان يدويا من داخل React.

تستطيع كل صفحة تغير عنوانها بنفسها كالتالي

import { useEffect } from "react";

function Page1() {
  useEffect(() => {
    document.title = "Page 1";
  }, []);

return (
        <div>
            <h1>Page 1</h1>
            {/* باقي المكونات */}
        </div>
    )
}

وهكذا في باقي الصفحات كل واحدة منهم تقوم بكتابة العنوان الخاص بها في useEffect.

تستطيع أيضا تحديد العنوان تلقائيا حسب الرابط (URL) لو الروابط عندك واضحة مثل (about أو contact/) يمكن عمل مكون صغير مسؤول عن تحديث العنوان تلقائي حسب الصفحة كالتالي

1. ملف فيه العناوين:

// pageTitles.js
const pageTitles = {
  "/": "الصفحة الرئيسية",
  "/about": "من نحن",
  "/contact": "اتصل بنا",
};

export default pageTitles;

2. مكون PageTitleUpdater:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import pageTitles from "./pageTitles";

function PageTitleUpdater() {
  const location = useLocation();

  useEffect(() => {
    const title = pageTitles[location.pathname] || "تطبيقي";
    document.title = title;
  }, [location.pathname]);

  return null;
}

useLocation هو hook من React Router يعطي لك المعلومات عن الرابط الحالي في المتصفح.
2. تستخدم المكون PageTitleUpdater في ملف App:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import PageTitleUpdater from "./PageTitleUpdater";

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

بالإضافة لذلك طبعا يمكنك استخدام مكتبة react-helmet كما ذكر لك محمد في التعليق السابق لهذا الأمر.

Zen Eddin Allaham · 29 يونيو

الخطأ لم يعد يظهر اريد ايضا انشاء صفحة جديدة localhost من اجل اضافة بع

الخطأ لم يعد يظهر اريد ايضا انشاء صفحة جديدة localhost من اجل اضافة بعض الصفحات single page

Mustafa Suleiman · 29 يونيو

بتاريخ 3 ساعة قال Hxfhf Ucicic:

الخطأ لم يعد يظهر اريد ايضا انشاء صفحة جديدة localhost من اجل اضافة بع

الخطأ لم يعد يظهر اريد ايضا انشاء صفحة جديدة localhost من اجل اضافة بعض الصفحات single page

أرجو توضيح ما تريد تنفيذه، حسب ما فهمت تريد إنشاء صفحة جديدة، وفي React ذلك يتم من خلال المكونات، ثم ربط ذلك المكون بموجه router ليتم التوجيه إليه عن زيارة المسار الخاص به أو الضغط على الرابط الخاص به.

بالطبع ستحتاج إلى مكتبة react-router-dom

npm install react-router-dom

وليكن اسم المكون About.js ونضعه في مجلد باسم pages:

import React from 'react';

const About = () => {
  return (
    <div>
      <p> نص تجريبي</p>
    </div>
  );
};

export default About;

ثم في ملف App.js قم بإعداد التوجيه باستخدام react-router-dom.

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import NewPage from './pages/About';
import Home from './pages/Home'; 

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">الصفحة الرئيسية</Link>
            </li>
            <li>
              <Link to="/about">الصفحة الجديدة</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

تغير عنوان الصفحة في React

السؤال

Zen Eddin Allaham

5 أجوبة على هذا السؤال

Recommended Posts

محمد_عاطف

Zen Eddin Allaham

Mustafa Mahmoud7

Zen Eddin Allaham

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية