带查询参数的 Gatsby 导航执行硬刷新并丢失参数

编程问答 2022-05-27

问题描述

我在登录页面后面有私人页面，如果您尝试访问某个页面，您将面临的第一个页面是重定向到登录页面，一旦您成功登录，您将被重定向到您要求的页面，例如。

https://example.com/one-of-the-private-pages

重定向到

https://example.com/login

然后重定向到

https://example.com/one-of-the-private-pages

重定向是来自 Gatsby 的导航工具

所有这些逻辑都按预期工作，但问题是当我需要查询参数时

https://example.com/one-of-the-private-pages?param1='example'

在这种情况下，行为是：

登录后

navigate(https://example.com/one-of-the-private-pages?param1='example')

然后我可以看到带有参数和硬刷新的页面闪烁 最后，我的网址是：

https://example.com/one-of-the-private-pages

这仅在以开发模式构建到生产环境后才会发生，一切正常

注意：我尝试删除页面上的所有内容，实际上只有一个 div 和一个 h1 组件。

解决方法

Gatsby，从 @reach/router（来自 React）扩展而来，所以它跟在 the behavior of it 之后。它仅用于内部导航，默认情况下不支持散列 URL 或参数，如 docs points:

<Link> 和 navigate 都不能用于带有 哈希或查询参数。如果你需要这种行为，你应该 使用锚标记或导入 @reach/router 包 - Gatsby 已经依赖于使用它的 navigate 函数，如下所示：

这就是您的页面在丢失参数之前闪烁的原因。不要专注于 gatsby develop/gatsby build，它们有不同的行为，以不同的方式对待和编译代码，这并不意味着您的代码有问题并且在一个环境中停止工作，只是盖茨比不支持。

说，此时，你有两个选择：

  • 直接使用 @reach/router 依赖项，如文档所建议的：

    import { navigate } from '@reach/router';

...

onClick = () => {
   navigate('#some-link');
   // OR
   navigate('?foo=bar');
}

    注意 import { navigate } from '@reach/router';（不是来自 Gatsby）

  • 使用 window.location 重定向来获取参数（按照您的意愿操作它们）并相应地重定向用户。

此外，尝试使用部分路由而不是绝对路由，因为在这种情况下内部导航效果更好，例如：

navigate(/one-of-the-private-pages?param1='example')
,

我刚刚解决了我的问题，我使用完整的 URL 进行导航

错误：

navigate(https://example.com/one-of-the-private-pages?param1='example')

正确：

navigate(/one-of-the-private-pages?param1='example')
gatsbynavigationnavigationreach-routerreactjsreactjsreactjsreactjs