使用谷歌AdSense的React +反應路由器

我試圖將谷歌Adsense整合到我的React網站，並遇到問題。在我的網頁獲得的廣告，我已經包括了這個腳本標籤到我的HTML文件的head：使用谷歌AdSense的React +反應路由器

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

的廣告被包裹在一個簡單的組件，它看起來像這樣：

export default class GoogleAdSense extends Component {  
    componentDidMount() { 
    (window.adsbygoogle = window.adsbygoogle || []).push({}); 
    } 

    render() { 
    const { 
     showAd, 
     className, 
     slot, 
     format, 
    } = this.props; 

    return (
     <div className="GoogleAdSense"> 
     <ins 
      className={ `adsbygoogle ${className}` } 
      style={{ display: 'block' }} 
      data-ad-client="ca-pub-7104738102834759" 
      data-ad-slot={slot} 
      data-ad-format={format} 
     > 
     </ins> 
     </div> 
    ); 
    } 
}

哪由其他組件這樣呈現：

<GoogleAdSense 
    slot="3461840703" 
    className="QuestionGoogleAd" 
    format="auto" 
/>

這種方法是從this文章拉到

使用上述實施方式，廣告可以在頁面上正確加載。用戶導航到其他頁面時會出現問題。由於我使用的是反應路由器，因此頭部不會更新（除了某些反應頭盔標題更改外），並且AdSense腳本不會重新加載。這使得Adsense的認爲這是在同一頁上通過Adsense的網頁瀏覽數我越來越和Adsense的文檔here所示：

單獨的JavaScript代碼：AdSense會在頁面視圖時AdSense廣告代碼由用戶的瀏覽器執行。

這是由事實進一步證明，當我檢查的Adsense的HTTP請求，我可以看到，有一個prev_fmts PARAM可以記住以前的廣告請求：

的問題是，經過約12-16廣告顯示（2每頁，所以最多8個頁面訪問量），AdSense搭配一個400錯誤返回一個空的html文件，以後每廣告請求：

如果我通過點擊cmd-r手動刷新頁面，則廣告再次正確加載，但僅限於接下來的幾次綜合瀏覽。我嘗試刪除之前提到的script，並將其重新插入每個頁面更改的頭部，因爲（理論上）會重新運行廣告代碼並觸發新的AdSense頁面瀏覽，但這並不奏效。該網站的主要內容是能夠展示廣告以產生穩定的收入來源，並且如果我無法使用React在我的所有網頁瀏覽中展示廣告（我現在平均每個用戶約20人），我將不得不重新實現整個網站，我不想這樣做真的。是否有其他人經歷過這個並找到了解決方案？

來源

2017-05-11 taylorc93