javascript - 没有匹配时跳出 ReactRouter

Question

我们正在现有的多页面应用程序中添加一些 react-router，打算慢慢过渡到 SPA 设置。使用 Link 链接到尚未(尚未)由 Router 处理的页面时会出现问题。

在我的主开关中，我有一个 fallthrough Route，它呈现一个加载微调器，应该负责重定向、重新加载或触发浏览器的完整页面重新加载并显示遗留服务器呈现的页面。这有效...

... 直到我们按下后退按钮。

无论我使用 window.open、window.location.assign 还是 window.location.replace，当我回击时按钮 onpopstate 发生，地址栏中的 URL 发生变化，但由于 react-router 在该遗留页面上未激活，内容不会改变。

唯一可行但肮脏的解决方法是稍微更改 URL(fx 添加一个 ? 或 & 字符)并使用 window.location.replace 使浏览器进行刷新。但这感觉不对。

非常感谢任何帮助..

Answer 1

找到有效的解决方案；

const initialPage = document.location.href.replace(/#.*/, '');
window.addEventListener('popstate', () => {
    if (!isAppPage()) {
        const newPage = document.location.href.replace(/#.*/, '');
        if (newPage !== initialPage) {
            window.location.reload();
        }
    }
});

其中 isAppPage 是一个可以判断我们是否处于 SPA 模式的函数。

我正在记录 initialPage 并将其与新页面进行比较，以允许在不触发重新加载的情况下通过 #hash 进行导航。