有没有办法让路由器查询保持在 nextjs 中的页面刷新答案

【问题标题】：is there a way to keep router query on page refresh in nextjs有没有办法让路由器查询保持在 nextjs 中的页面刷新
【发布时间】：2020-09-05 13:33:37
【问题描述】：

我有一个带有动态 url 的动态页面。一切都是客户端渲染的。

这是链接到第二页的link

<Link
href= {{ pathname: '/dashboard/[orderdetail]', query: { id: `${orderID}` } }} as={`/dashboard/${orderDetails.orderNo}`}
</Link>

这很好地将每个查询带到第二页。但是当我刷新第二页时，一切都丢失了。我通过的每个查询都丢失了

我尝试过使用with/Router

let orderID=this.props.router.query.orderdetail;

页面刷新时一切都丢失了。

我需要query string 我要传递到第二页来调用运行良好的数据库。但同样，当我刷新页面时，没有任何效果。

页面刷新时如何避免这种丢失。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

最后我得到了这个解决方案，这里没有区别

               <Link
                 href={{
                  pathname: "/dashboard/" + `${orderDetails.orderNo}`,
                  query: { id: `${orderID}` },
                }} as={`/dashboard/${orderDetails.orderNo}`}
              >
              </Link>

但是在第二页中添加这个以某种方式维护路由查询。

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

这如何解决问题，我不知道，但确实如此。考虑到我只想要客户端渲染，我认为不会有太大的不同

【讨论】：

我也不知道它是如何工作的，但对我也有用 :)
x2 它对我有用，但我真的不知道为什么...... :(
"params：如果这个页面使用动态路由，params包含路由参数。如果页面名称是[id].js，那么params看起来像{id: ... }。了解更多信息，请查看动态路由文档。” nextjs.org/docs/basic-features/…
这里也一样...我不太清楚它是如何工作的，但它确实有效！ :D 谢谢泰奥
在我的情况下，getServerSideProps 不能用于下一次导出

【解决方案2】：

您使用的查询参数似乎有些混乱。

使用示例中的href URL 对象，生成的完整href URL 将是：

/dashboard/[order]?id=nnn

所以router.query 将包含一个order 键和一个id 键，但没有orderdetail。

order 键将使用您给定的as 属性设置为orderDetails.orderNo 的内容，但不会设置id，因为as 没有?id=xxx 部分。

假设您的 JS 文件名是 /pages/dashboard/[order].js，您的 ${orderDetails.orderNo} 可以作为 this.props.router.query.order 访问，并且永远不会使用 id 查询字符串。

this.props.router.query.orderdetail 在您的问题代码中将永远不会设置为任何内容，因为请求没有这样的参数名称。

如果文件名是/pages/dashboard/[orderdetail].js，则需要相应的

<Link href="/dashboard/[orderdetail]" as={`/dashboard/${orderDetails.orderNo}`}>...</Link>

【讨论】：

我真正想知道的是为什么我无法访问localhost:3000/dashboard/601020 最后一个数字 601020。当我刷新它时它仍然在 url 栏中，但路由器查询会丢失它
“扔掉”是什么意思？它应该可以通过this.props.router.query.order 访问
没错，它是空的，我不知道为什么
JS文件的文件名是什么？您使用的是哪个 NextJS 版本？
您确实注意到在您问题的代码中您指的是this.props.router.query.orderdetail? “orderdetail”名称不正确，查询参数为“order”。