How can i Dynamically Update the React Helmet Value when state changes-CodePudding

I want to dynamically update the React Helmet value, I tried it with the state but whenever I am changing pages It won't update, the value instead it's showing the older value I want to add a meta tag for SEO the canonical tag and every page changes I want to update it but when I am reloading the page it is updating but not on the page changes with React Router


function App() {
 
  const location = useLocation();
  const [canonical, setCanonical] = useState(window.location.href);

  useEffect(() => {
    setCanonical(window.location.href);
  }, [location]);

  return (
    <div className="App">
      <Helmet>
       
        <link rel="canonical" href={canonical} />
      </Helmet>
  

I tried with the following code present in my App.js file  I want to update it the canonical value when the state changes

CodePudding user response：

try useLocation hook to detect route changes

const location = useLocation();

useEffect(() => {
  console.log('Location changed');
}, [location]);