resources/js/components/common/CanonicalLinks.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Helmet } from 'react-helmet';
   4 import { useTranslation } from 'react-i18next';
   5
   6 const CanonicalLinks = ({ base, lang, langs }) => {
   7         const { i18n } = useTranslation();
   8
   9         const activeLang = lang || i18n.language;
  10         const availableLangs = langs || ['de', 'en'];
  11
  12         return <Helmet>
  13                 <link
  14                         href={`https://alttp.localhorst.tv${base}?lng=${activeLang}`}
  15                         hrefLang={activeLang}
  16                         rel="canonical"
  17                 />
  18                 <link
  19                         href={`https://alttp.localhorst.tv${base}`}
  20                         hrefLang="x-default"
  21                         rel="alternate"
  22                 />
  23                 {availableLangs.filter(l => l !== activeLang).map(l =>
  24                         <link
  25                                 key={l}
  26                                 href={`https://alttp.localhorst.tv${base}?lng=${l}`}
  27                                 hrefLang={l}
  28                                 rel="alternate"
  29                         />
  30                 )}
  31         </Helmet>;
  32 };
  33
  34 CanonicalLinks.propTypes = {
  35         base: PropTypes.string.isRequired,
  36         lang: PropTypes.string,
  37         langs: PropTypes.arrayOf(PropTypes.string),
  38 };
  39
  40 export default CanonicalLinks;