react-helmet duplicated tags

Question

I have helmet configured for seo and want to override some tags for specific pages but it duplicate instead of replacing

// This is default values for all pages
import { Helmet } from react-helmet
<Helmet>
  <link rel="canonical" href="canonical-default">
  <link rel="alternate" hrefLang="en" href="alternate-default">
<Helmet>

// x page
import { Helmet } from react-helmet
<Helmet>
  <link rel="canonical" href="canonical-x">
  <link rel="alternate" hrefLang="en" href="alternate-x">
<Helmet>

Actual Result: On HTML Helmet overrides canonical but duplicates alternate link

<link rel="canonical" href="canonical-x">
<link rel="alternate" hrefLang="en" href="alternate-default">
<link rel="alternate" hrefLang="en" href="alternate-x">

Expected Result: It should override both links

<link rel="canonical" href="canonical-x">
<link rel="alternate" hrefLang="en" href="alternate-x">

And I don't want to use query selector and remove previous links from HTML manually

Answer 1

To fix the issue of duplicated tags in react-helmet, you can use the Helmet component's link and meta props to override the default values for specific pages. Here's an example of how you can achieve this:

// This is default values for all pages
import { Helmet } from react-helmet
<Helmet>
  <link rel="canonical" href="canonical-default">
  <link rel="alternate" hrefLang="en" href="alternate-default">
<Helmet>

// x page
import { Helmet } from react-helmet
<Helmet>
  <link rel="canonical" href="canonical-x" />
  <link rel="alternate" hrefLang="en" href="alternate-x" />
<Helmet>

By using the link and meta props of the Helmet component, you can directly override the default values for specific pages without duplicating the tags. This will ensure that the expected result is achieved without the need to manually remove previous links from the HTML.