Question

我在google的结果中有关于react-router和google缓存页面的问题。在这种情况下，我们有一个使用react-router（通过browserHistory）的SPA，问题在于：google cached页面是一个页面包装器，其中URL-a因SPA的路由器中定义的URL而异。在这种情况下，应用程序的路由属于未找到的页面的定义。（例子）

和谷歌的SPA页面的缓存结果，而不是显示页面的内容显示组件PageNotFoundApp（找不到页面的路由*）。

您是否知道如何解决所描述的问题？

Answer 1

一个选项是使用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));
    } 
};

在此之后，对于catch-all路由定义，您可以使用以下内容：

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

请注意，使用注入的replace函数实际上会将浏览器导航到作为第二个参数提供的路径。我没有在谷歌缓存的情况下测试这个，它可能是一个错误的实现。作为选项，您可以将有效状态作为此函数的第一个参数传递。

Answer 2

如果域名不同，此问题的解决方案可能是绕过SPA的加载。而且只有当页面具有禁用JavaScript时使用的后备HTML版本（请参阅：https://web.dev/without-javascript/）时，它才有意义。

例如，SPA的HTML页面必须具有基本href

<html>
    <head>
        <base href="https://example.com">
        ...

index.js可能会这样

let head = document.getElementsByTagName('head')[0];
let base = head.getElementsByTagName("base")[0];
let domain = base.href.replace('https://', '');

if (window.location.host === domain) {
  import('./App');
} else {
  const root = document.getElementById("root");
  root.classList.remove('loader');
  // or something else
}

结果，搜索引擎将为单页应用程序编制索引，但是如果从Google缓存中打开页面，则会显示后备HTML页面。

SPA的React-router和google缓存页面

2 个答案: