代码之家 › 专栏 › 技术社区 › Wouter van Vliet

当没有匹配项时从ReactRouter中断

react-router reactjs javascript

Wouter van Vliet · 技术社区 · 6 年前

我们在洒些水 react-router 在现有的多页应用程序上,打算慢慢过渡到SPA设置。使用时出现问题 Link 链接到尚未由处理的页面 Router .

Route ,它将呈现加载微调器,并应负责重定向、重新加载或触发浏览器的整页重新加载并显示旧服务器呈现的页面所需的任何操作。这是有效的。。。

不管我用什么 window.open , window.location.assign ,或 window.location.replace ,当我按下后退按钮时 onpopstate 地址栏中的URL发生变化,但是 反应路由器

唯一有效的,但肮脏的,解决办法将是稍微改变URL(fx添加?或字符)和使用 window.location.replace文件 使浏览器进行刷新。但这感觉不对。

非常感谢任何帮助。。

1 回复 | 直到 6 年前

Wouter van Vliet 6 年前

找到了一个有效的解决方案;

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并将其与新页面进行比较,以便在不触发重新加载的情况下通过#哈希导航。

推荐文章

siddhant kumar · Can'读取未定义的属性(读取“path”)

2 年前

sdfsdf · useNavigate替换选项的作用是什么?

2 年前

Tanner Summers · react router 6渲染的子级问题

3 年前

Tesh Aych · react axios URL连接返回404未找到

3 年前

wahida cse · 如何在mongodb中只删除一个对象,而不是删除所有与筛选查询匹配的对象?

3 年前

Kevin Tanuwijaya · 如何使用参数来响应路由器dom链接

3 年前

Roy · 带有不同道具的react组件的多个实例无法正常工作

3 年前

Ahmed Haque · 通过出口上下文传递多个状态变量

3 年前

kiryl · 警告。/。缓存/根目录。js尝试导入错误:“BaseContext”未从“@gatsbyjs/reach router”导出(作为“BaseContext”导入)

3 年前

Ancross · 链接未路由到组件

3 年前