Question

我在我的网站上使用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的专业人士，所以我无法独自解决这个问题。但我认为对于比我更有经验的人来说，这是一个简单的解决方案。

任何帮助都将不胜感激。

Answer 1

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

Answer 2

好的，现在我知道问题是因为窗口将始终在服务器端未定义。

然而，还有另一种解决方案。

我也请求Vulcan slack的帮助，这里有GitHub commit修复。

React.js - 每个页面的动态规范URL

2 个答案: