我有一个带有动态 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传递到第二页来调用运行良好的数据库。但是，当我刷新页面时，没有任何效果。
页面刷新时如何避免这种损失。
最后我得到了这个解决方案，这里没有区别
<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
};
}
我不知道这是如何解决问题的，但确实如此。考虑到我只想要客户端渲染，我认为不会有太大区别
看起来您对正在使用的查询参数有些困惑。
使用href示例中的URL 对象，生成的完整 href URL 将是：
/dashboard/[order]?id=nnn
sorouter.query将包含一个order键和一个id键，但没有orderdetail。
该order密钥将被设置为内容orderDetails.orderNo与给定的as属性，但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>