Reactjs 带有查询参数的盖茨比导航进行硬刷新并丢失参数

我在一个登录页面后面有一个私人页面，如果你试图访问一个页面，你首先会遇到一个重定向到登录页面的问题，例如，一旦你成功登录，你就会被重定向到你想要的页面

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

重定向到

https://example.com/login

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

然后重定向到

https://example.com/login

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

重定向与来自盖茨比的导航UTIL一起进行

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

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

在这种情况下，行为是：

• 重定向到登录页面

登录后

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

然后，我可以看到页面中的参数和硬刷新闪烁 最后，我的URL是：

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

这只有在开发模式下从构建到生产后才会发生，一切都会正常工作

---

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

Gatsby，从

@reach/router

（从React）扩展而来，如下所示。它仅用于内部导航，默认情况下不支持哈希URL或参数，如下所示：

无论是

还是

导航

都不能用于带有 散列或查询参数。如果你需要这种行为，你应该 使用锚定标签或导入Gatsby提供的

@reach/router

包 已依赖于使用其

导航

功能，如：

这就是为什么页面在丢失参数之前会闪烁。不要关注于

gatsby开发

/

gatsby构建

，它们有不同的行为，以不同的方式对待和编译代码，这并不意味着您的代码有问题，并且在一个环境中停止工作，只是gatsby不支持它

说到这里，你有两个选择：

• 直接使用

  @reach/router

  依赖项，如文档所示：

  import { navigate } from '@reach/router';
  
  ...
  
  onClick = () => {
     navigate('#some-link');
     // OR
     navigate('?foo=bar');
  }
  

  注意

  从'@reach/router'导入{navigate}（不来自盖茨比）
  
  

• 使用

  window.location

  redirection获取参数（根据需要操作它们）并相应地重定向用户

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

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')

---

有趣的是，我发现问题似乎是我传递了完整的URL来导航，导航只需要路径，例如导航（/其中一个私有页面？param1='example'）谢谢你的回答，我会尝试一下，让你知道。在我的情况下@reach/router即使在完整URL的情况下也能工作