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

当没有匹配项时从ReactRouter中断

react-router reactjs javascript

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

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

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

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

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

非常感谢任何帮助。。

1 回复 | 直到 8 年前

Wouter van Vliet 8 年前

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

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前