如何在React Router单页应用中为所有页面添加og:url属性并实时更新

直接给出可行方案：

1. 修正Hooks调用方式：你当前在Helmet的属性中直接调用useLocation()，违反了React Hooks必须在组件顶层调用的规则。先在Page组件顶层获取location对象，再用于构造URL。
2. 用origin构造完整URL：用window.location.origin代替host，确保og:url是包含协议的完整有效地址。

修改后的Page组件代码：

function Page() {
    const {t} = useTranslation(['globals', 'footer']);
    const location = useLocation(); // 顶层调用useLocation

    return (
        <Suspense fallback={<Loader/>}>
            <Helmet>
                <meta charSet="utf-8" />
                <meta 
                    property="og:url" 
                    content={`${window.location.origin}${process.env.PUBLIC_URL}${location.pathname}`} 
                />
                <title>--------</title>
                <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
            </Helmet>
            {/* 页面其他内容 */}
        </Suspense>
    );
}

原理：React Router的useLocation()会响应路由变化，当切换路由时，location对象更新，触发Page组件重新渲染（仅Page组件及其子组件，不会重新渲染整个App），Helmet会自动同步更新页面头部的meta标签。

内容的提问来源于stack exchange，提问作者Peter Breen