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

问题描述

我有一个带有动态 url 的动态页面.一切都是客户端呈现的.

I have a dynamic page with a dynamic url. everything is clientside rendered.

这是链接到第二页的link

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

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

This works well taking every query to the second page. But when I refresh the second page, everything is lost. Every query i had passed is lost

我已经尝试使用 with/Router

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

仍在页面刷新时一切都丢失了.

Still on page refresh everything is lost.

我需要查询字符串我传递到第二页来调用一个运行良好的数据库.但同样，当我刷新页面时，没有任何效果.

I need the query string i am passing to the second page to make a call to a database which works well. But again, when I refresh the page nothing works.

如何在页面刷新时避免这种损失.

How can I avoid this loss when the page refreshes.

推荐答案

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

In the end I ended up with this solution, there is no difference here

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

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

but adding this in the second page somehow maintains the route query.

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

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

How this solves the problem, I don't know, but it does. I do not think there will be that much difference considering I only wanted client-side rendering

这篇关于有没有办法在nextjs中保持路由器查询页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！