DOMException：无法在“History”上执行“replaceState”：带有 URL 的历史状态对象

在反应应用程序中，在谷歌上打开网页的缓存版本时出现以下错误。

DOMException：无法在“历史记录”上执行“replaceState”：历史记录 无法在 URL 为“https://projecturl”的状态对象中创建 来源为“https://webcache.googleusercontent.com”和 URL 的文档 'https://webcache.googleusercontent.com/search?q=cache:X4dz2ukZZAYJ:https://projecturl/+&cd=1&hl=en&ct=clnk&gl=in'

在我们的应用程序中，我们使用react-router-dom并实现了服务器端渲染。当在谷歌搜索中使用缓存选项打开页面时，它首先加载页面几秒钟，然后在控制台中显示带有上述错误的空白页面。

在寻找解决方案时我发现https://github.com/ReactTraining/react-router/issues/5801与我的问题相关，但没有解决方案。

更新1：

同样的问题被问到here，但对于 Angular 来说。 尽管我无法理解答案中解释的内容以及它如何与我的问题相关。

我们正在使用React 可加载 SSR 插件用于我们的 React 应用程序的服务器端渲染。

更新2：

在用于服务器端渲染的 npm 包的 Git 存储库上打开了相同的问题。问题已打开

更新3：

当我通过禁用安全性在谷歌浏览器中打开该页面时，该页面工作正常。因此它不应该与我的代码相关。

此外，在 bing 搜索引擎缓存版本中打开时会出现不同的错误：

脚本资源位于重定向后面，这是不允许的。

在 bing 和 yahoo 搜索引擎上，404 页面均以缓存版本出现。

更新4：

这是路由文件的样子：

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Loadable from 'react-loadable';
import {
  OTPNew,
  LoginNewFb,
  OnboardingWrapper,
  PageNotFound,
  SignUpSpecialty,
  SignUpDetails,
  Feed,
} from './lazy';

const RootComponent = Loadable({
  loader: () =>
    import(/* webpackChunkName: "rootcomp" */ '../components/RootComponent'),
  loading: () => null,
  modules: ['../components/RootComponent'],
  webpack: () => [require.resolveWeak('../components/RootComponent')],
});

const signupRoutes = [
  {
    path: '/login/otp',
    component: OTPNew,
  },
  {
    path: '/login',
    component: LoginNewFb,
  },
  {
    path: '/signup/details',
    component: SignUpDetails,
  },
  {
    path: '/signup',
    component: SignUpSpecialty,
  },
];

const Routes = () => {
  return (
    <Switch>
      {signupRoutes.map(sRoute => (
        <Route
          key={sRoute.path}
          path={sRoute.path}
          render={routeProps => (
            <OnboardingWrapper>
              <sRoute.component {...routeProps} />
            </OnboardingWrapper>
          )}
        />
      ))}
      <Route path="/feed" component={Feed} />
      <Route path="/" component={RootComponent} />
      <Route path="*" component={PageNotFound} />
    </Switch>
  );
};

export default Routes;

根组件.js

    import React from 'react';
    import { Switch, Route } from 'react-router-dom';
    import { useSelector } from 'react-redux';
    import MainComponent from './MainComponent';
    import { DiscussionComponent, HomePage, PageNotFound } from '../routes/lazy';
    import { useIsMobile } from '../actions/VerifyMobileAction';
    import rootRoutes from '../routes/rootRoutes';
    import quizRoutes from '../routes/quizRoutes';
    import { parseQueryParameter, getAPIHost } from '../helpers/helperFunctions';
    
    function cacheQueryParser(query, projectCanonnicalAddr) {
      return query
        .split(projectCanonnicalAddr)
        .pop()
        .split('+')[0];
    }
    
    function getPageOrNotFound(location) {
      const queryObject = parseQueryParameter(location.search);
      const projectCanonnicalAddr = getAPIHost();
    
      if (
        location.pathname === '/search' &&
        'q' in queryObject &&
        queryObject.q.indexOf('cache') === 0 &&
        queryObject.q.indexOf(projectCanonnicalAddr) > -1
      ) {
        const replacer = cacheQueryParser(queryObject.q, projectCanonnicalAddr);
        return {
          ComponentRender: null,
          replacer,
        };
      }
      return {
        ComponentRender: PageNotFound,
        replacer: null,
      };
    }

const RootComponent = () => {
  const { OtpVerified } = useSelector(store => store.authenticationReducer);
  const isMobileViewport = useIsMobile();

  function logicForHomeRoute() {
    if (OtpVerified) {
      return {
        component: DiscussionComponent,
      };
    }
    return {
      renderHeaderDesktop: false,
      renderHeaderMobile: false,
      renderFooter: false,
      renderSideProfile: false,
      component: HomePage,
    };
  }

  const typeOfAppClassName = `${
    isMobileViewport ? 'mobile' : 'desktop'
  }-viewport-app`;

  return (
    <div className={typeOfAppClassName}>
      <Switch>
        <Route
          exact
          path="/"
          render={() => <MainComponent {...logicForHomeRoute()} />}
        />
        {[...quizRoutes, ...rootRoutes].map(sRoute => (
          <Route
            key={sRoute.path}
            path={sRoute.path}
            render={props => {
              const { location, history } = props;
              if (sRoute.path === '/:alternate_username') {
                if (location.pathname.startsWith('/dr') === false) {
                  const { replacer, ComponentRender } = getPageOrNotFound(
                    location
                  );
                  if (ComponentRender) {
                    return <ComponentRender />;
                  }
                  history.replace(replacer);
                  return null;
                }
              }
              return <MainComponent {...props} {...sRoute} />;
            }}
          />
        ))}
      </Switch>
    </div>
  );
};

export default RootComponent;

UPDATE 5

控制台中显示另一个错误：

获取脚本时收到错误的 HTTP 响应代码 (404)。

由于您在“空白页面”之前看到正常页面，我的猜测是，首先您会看到该网站的 SSR 版本，然后在加载脚本后，由于 CORS 限制，您会看到一个“空白页面”。

作为解决方案，您可以仅为您的域加载脚本，并保留 SSR 版本谷歌/必应/雅虎没有机会加载这些脚本并破坏站点。

答案是基于反应可加载 ssr 插件的例子，这里的想法是检查window.location.origin与您的域名的来源。否则，就完全跳过这些文件。

原来的例子：

res.send(`
  <!doctype html>
  <html lang="en">
    <head>...</head>
    ${styles.map(style => {
      return `<link href="/dist/${style.file}" rel="stylesheet" />`;
    }).join('\n')}
    <body>
      <div id="app">${html}</div>
      ${scripts.map(script => {
        return `<script src="/dist/${script.file}"></script>`
      }).join('\n')}
  </html>
`);

这是我的动态加载示例：

res.send(`
  <!doctype html>
  <html lang="en">
    <head>...</head>
    ${styles.map(style => {
      return `<link href="/dist/${style.file}" rel="stylesheet" />`;
    }).join('\n')}
    <body>
      <div id="app">${html}</div>
      <script>
        function loadScript(url) {
          var s = document.createElement("script");
          s.src = url; document.body.appendChild(s);
        }

        if (
          window.location.origin === "https://example.com" ||
          window.location.origin === "http://localhost" // for development purpose
        ) {
          ${scripts.map(script => {
            return `loadScript("/dist/${script.file}");`
          }).join('\n')}
        }
      </script>
  </html>
`);

当然，您的应用程序中有自己的代码，这就是为什么我不能给您提供完整的解决方案。您应该更改代码以遵循这个想法。

至于其他错误。部分地，它们也基于 CORS 限制，其中之一来自https://connect.facebook.net/en_US/fbevents.js。 404 错误与您的服务工作人员文件相关，是由谷歌内部“网络缓存”算法引起的，我不确定您是否可以对此采取措施。

无论如何，这些错误不应干扰缓存站点的正确显示，因为它们不是您看到空白页面的原因。当然，我认为这是基于屏幕截图的。