SPA的反應路由器和谷歌緩存頁面

我有一個關於谷歌反應路由器和谷歌緩存頁面的問題。在這種情況下，我們有一個使用react-router（通過browserHistory）的SPA，這裏的問題是：google緩存頁面是一個頁面封裝器，其中URL-a與SPA路由器中定義的URL不同，在這種情況下，應用程序的路由屬於未找到頁面的定義。（舉例）SPA的反應路由器和谷歌緩存頁面

和google頁面的緩存結果，反而顯示頁面的內容顯示組件PageNotFoundApp（找不到頁面的路由*）。

你有什麼想法，對解決所描述的問題能做些什麼？

來源

2017-02-26 zdrsoft

一種選擇是使用onEnter事件

const projectCanonnicalAddr = "http://localhost"; 
function cacheQueryParser(query) { 
    let out = ''; 
    if (typeof query === 'string') { 
     out = query.split(':').pop().replace(/^[^/]*/, ''); 
    } 
    return out; 
} 
function intercepPath(next, replace) { 
    if (next.location.pathname === '/search' 
     && next.location.query.q 
     && next.location.query.q.indexOf('cache') === 0 
     && next.location.query.q.indexOf(projectCanonnicalAddr) > -1) { 
      replace(null, cacheQueryParser(next.location.query.q)); 
    } 
};

在此之後，對於包羅萬象的路線定義，你可以使用這樣的攔截路由邏輯：

<Route path="*" component={PageNotFoundApp.container} onEnter={intercepPath}/>

請注意，使用注入的replace函數實際上會將瀏覽器導航到作爲第二個參數提供的路徑。在谷歌緩存的情況下，我沒有測試過它，這可能是一個錯誤的實現。作爲一個選項，您可以傳遞一個有效的狀態作爲此函數的第一個參數。

來源

2017-02-26 09:23:14

SPA的反應路由器和谷歌緩存頁面

回答

相關問題