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

Question

我在登录页面后面有私人页面，如果你试图到达一个页面，你首先要面对的是重定向到登录页面，一旦你成功登录，你将被重定向到你要求的页面，例如。

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

重定向到

https://example.com/login

然后重定向到

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

重定向使用来自Gatsby

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

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

Answer 1

Gatsby，从@reach/router(从React)扩展，所以它遵循它的行为。它只用于内部导航，默认情况下，不支持散列url和参数，正如文档所指出的:

<Link>和navigate都不能用于带a的路由导航哈希或查询参数。如果您需要这种行为，您应该这样做使用锚标记或导入@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')