kessius85 Comments - Answer Overflow

I've been looking at how to implement "react-helmet-async" and didn't manage ... I will tell you what I did and you tell me what's missing. I did: * install react-helmet-async * (Layout.jsx) import { HelmetProvider } from "react-helmet-async"; // and added the <HelmetProvider> tag * (DynamicPage.jsx) import { Helmet } from 'react-helmet-async'; // and added the <Helmet> tag and the dynamic tags inside Summary: We installed the react-helmet-async library to handle dynamic metadata in the React component. We modified the Layout.jsx component to wrap the entire app with the HelmetProvider, which allows child components to use Helmet to manipulate head tags. We implemented Helmet in the GuestFigureDetail.jsx component, where: We imported the Helmet component from react-helmet-async We created variables for the dynamic metadata based on the current figure We added the dynamic OG tags inside the Helmet component in the render We included metadata for Facebook and Twitter This is how my "main.wasp" client part looks like:

  client: {
    rootComponent: import { Layout } from "@src/Layout.jsx",
  },

  client: {
    rootComponent: import { Layout } from "@src/Layout.jsx",
  },

Two questiosn: 1. Do I need to remove the "head" tags from the main.wasp to make the react-helmet-async work? 2. What am I missing?

23 replies

WWasp

•Created by NEROX on 10/22/2024 in #🙋questions

Redirect WWW to not-WWW version

This code worked for me:

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const RedirectWWW = () => {
  const navigate = useNavigate();

  useEffect(() => {
    if (window.location.hostname.startsWith("www.")) {
      const newHostname = window.location.hostname.replace("www.", "");
      const newUrl = `${window.location.protocol}//${newHostname}:${window.location.port}${window.location.pathname}${window.location.search}`;
      window.location.replace(newUrl);
    }
  }, [navigate]);

  return null;
};

export default RedirectWWW;

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const RedirectWWW = () => {
  const navigate = useNavigate();

  useEffect(() => {
    if (window.location.hostname.startsWith("www.")) {
      const newHostname = window.location.hostname.replace("www.", "");
      const newUrl = `${window.location.protocol}//${newHostname}:${window.location.port}${window.location.pathname}${window.location.search}`;
      window.location.replace(newUrl);
    }
  }, [navigate]);

  return null;
};

export default RedirectWWW;

53 replies

Gaming

Programming