状态更改时如何动态更新 React 头盔值

Question

我想动态更新 React Helmet 值，我在状态下尝试过，但是每当我更改页面时它都不会更新，而是显示旧值 我想为 SEO 添加一个元标记，规范标记和每个页面更改我都想更新它但是当我重新加载页面时它正在更新但不是在页面上使用 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

Answer 1

试试useLocation钩子来检测路由变化

const location = useLocation();

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