React.js - 每个页面的动态规范 url答案

【问题标题】：React.js - Dynamic canonical url for each pageReact.js - 每个页面的动态规范 url
【发布时间】：2017-10-14 19:31:21
【问题描述】：

我的网站使用Vulcan.js，默认情况下，它已将所有页面的规范网址设置为指向主页。现在我想将规范设置为指向每个页面的页面 url。

Vulcan 使用React Helmet 来制作头部标签，如果这对你有意义的话。它还使用React Router。

这是我拥有的当前代码：

  import React, { PropTypes, Component } from 'react';
  import Helmet from 'react-helmet';
  import Header from './Header.jsx';


  const canonical = window.location.href;  // this don't work, says ReferenceError: window is not defined



  const Layout = ({children}) =>

    <div className="wrapper" id="wrapper">

      <link rel="canonical" href={canonical} />

      <Header/>

      <div className="main">

        {children}

      </div>


    </div>

  export default Layout;

所以我得到的错误是：

ReferenceError：未定义窗口

我不是 React.js 的专家，所以我无法单独解决这个问题。但我认为对于比我更有经验的人来说，这很容易解决。

任何帮助将不胜感激。

【问题讨论】：

这段代码可以在服务器上运行吗？这是window 唯一未定义的地方。
来自react-router 的props 包括一个location，我认为它可能会满足您的需求。看起来您需要根据these docs 包装父组件
@MichelFloyd 是的，我现在知道了。谢谢！ :)

标签： javascript reactjs meteor react-router

【解决方案1】：

我必须说'const canonical = window.location.href'的方法不是你应该如何定义你的规范网址。规范网址对搜索引擎机器人说的一件事是，这是页面的真实网址，它并不总是与用户输入的网址相同。如果您使用 url 重写并且有超过 1 种方式进入页面，这种方法会给您带来问题，因为规范（应该是一个）将被设置为用户键入的值（或来自您内部某处的错误链接页，否则...）。另一件事是规范 url 用于从他进入的页面重定向用户，如果它看起来不一样，例如尝试转到 https://www.gsmarena.com/apple_iphone_7-8064.php 然后将 id 从“8064”更改为“8858” -看看 url 会发生什么！您应该为您的页面提供一个通用的规范 url 生成器，它可以通过使用页面的一些严格数据（例如电话 id）来解决完整的 url，如果用户带有另一个 url，您还应该将用户重定向到规范 url。更多信息：https://support.google.com/webmasters/answer/139066?hl=en

【讨论】：

你应该考虑添加一个你所提议的例子，链接可能会在未来中断。

【解决方案2】：

好的，所以现在我知道问题是因为窗口在服务器端总是未定义。

但是，还有另一种解决方案。

我也向 Vulcan slack 寻求帮助，这里是 GitHub commit 修复。

【讨论】：