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

Question

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

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组件。

Answer 1

Gatsby，扩展自 @reach/router（来自 React），因此它遵循 the behavior of it。它仅用于内部导航，默认情况下不支持散列 URL 或参数，如 docs points:

<Link> 和 navigate 都不能用于带有 哈希或查询参数。如果你需要这种行为，你应该要么 使用锚标记或导入 @reach/router 包——盖茨比 已经依赖于——利用它的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';（不是来自盖茨比）

• 使用window.location 重定向来获取参数（根据需要进行操作）并相应地重定向用户。

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

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

Answer 2

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

错误：

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

正确：

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