باگ react-helmet-async

یونس قربانی

سلام دوست من

این موارد رو تست کردی ؟

۱ - مطمئن شو که helmet در بالاترین سطح هست منظورم Providerاش هست در App.js یا index.js قرار بده

۲ - در برخی موارد React.StrictMode باعث میشه درست کار نکنه Helmet تست کن ببین بدون React.StrictMode مشکلت برطرف میشه یا نه

۳- برخی اوقات تغییر عنوان باید با useEffect اجرا بشه مخصوصاً اگه مقدار عنوان وابسته به state باشه:

import { Helmet } from "react-helmet-async";
import { useEffect, useState } from "react";

const MyComponent = () => {
  const [title, setTitle] = useState("عنوان اولیه");

  useEffect(() => {
    setTitle("عنوان جدید");
  }, []);

  return (
    <>
      <Helmet>
        <title>{title}</title>
      </Helmet>
      <h1>صفحه من</h1>
    </>
  );
};

اگر هیچکدام از راهکارهایی که دادم جواب نداد بررسی کن که document.title به‌طور مستقیم تغییر می‌کند یا نه:

useEffect(() => {
  document.title = "عنوان تستی";
}, []);

اگر این روش کار کرد احتمال داره مشکل از react-helmet-async یا نحوه رندر شدن باشه.

 در این حالت بهتره لاگ بگیری و ببینی آیا مقدار title هنگام تغییر مقدار توی Helmet درست آپدیت میشه یا نه.

davidrobert

درود StrictMode برداشتم اوکی شد