CODEWITHSUNDEEP
reactjsnext.js
Taio
Taio

Reputation: 3734

is there a way to keep router query on page refresh in nextjs

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

This is the link that links to the second page

<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

I have tried using 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.

Upvotes: 5

Views: 11412

Answers (3)

Ramon Orraca
Ramon Orraca

Reputation: 111

I had the same problem and fixed it by using pure JS to access the query string values. When getServerSideProps is used, Next will generate the page on the server-side for each incoming request. To avoid this server-side latency add the useEffect() hook to access the window object and from there retrieve the query string.

useEffect(() => {
    let queryString = window.location.search;
    let urlParams = new URLSearchParams(queryString);
    var studentId = urlParams.get("id");
}, []);

To access different query string values simply change the urlParms.get("id") to use the name of the query string variable you're looking for. I preferred this solution because I wanted to keep this functionality on the client and avoid adding unnecessary stuff to the server. This is also cool because you avoid using the useRouter() hook.

Upvotes: 1

Taio
Taio

Reputation: 3734

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

Upvotes: 10

Jesper We
Jesper We

Reputation: 6087

Looks like there is some confusion about what query parameters you are working with.

With the href URL object you have in your example the resulting full href URL will be:

/dashboard/[order]?id=nnn

so router.query will contain an order key and an id key, but no orderdetail.

The order key will be set to the content of orderDetails.orderNo with your given as property, but the id will not be set since as has no ?id=xxx part.

Assuming your JS filename is /pages/dashboard/[order].js, your ${orderDetails.orderNo} is accessible as this.props.router.query.order and the id query string is never used.

this.props.router.query.orderdetail as in your code from the question will never be set to anything since the request has no such parameter name.

If instead the filename is /pages/dashboard/[orderdetail].js you need the corresponding

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

Upvotes: 2

Related Questions