Next.JS router.query returns undefined for arrays

Question

I'm trying to pass objects of an array in another page using router.query, single objects such as router.query.title work fine, but when it comes to arrays such as router.query.reviews it returns something like this reviews: ['', '', '', '', '', '', '', '']. I've tried using router.isReady but nothing seems to change

Example object in the array

 {
    title: "Center-Hall",
    reviews: [
      {
        title: "Wislong Chew",
        comment: "jsdncjnsd csdncjds csjcnsdj csjdcn cdc djndc",
      },
      {
        title: "Wisdsdlong Chew",
        comment: "jsdncjnsd csdncjds csjcnsdj csjdcn cdc djndc",
      },
    ],
  },

Parent

{array.map((item) => (
          <Grid key={item} item>
            <Card
              label={item.title}
              onClick={() =>
                router.push({
                  pathname: "/page",
                  query: {
                    title: item.title,
                    reviews: item.reviews,
                  },
                })
              }
            />
          </Grid>
        ))}

Next Page

function index() {
  const router = useRouter();


  useEffect(() => {
    if (!router.isReady) return;
    console.log(router.query);
  }, [router.isReady]);


  const Reviews = () =>
      <ReviewCard
        reviewsList={router.query.reviews}
      />
    );

  return (
      <Box>
          <Typography>{router.query.title}</Typography>
          <Reviews />
      </Box>
  );
}

export default index;

Do you have an example of the reviews array data that you are trying to pass in the queryString? I suspect that they may be non-serializable values. — Drew Reese
– Drew Reese, Commented Jul 1, 2022 at 18:27
@DrewReese I've updated the question, you can now see an example of an item of the array — Salvo
– Salvo, Commented Jul 1, 2022 at 18:59

Vana_ _F · Accepted Answer · 2022-07-01 19:18:47Z

When you passing an array using router.query to another page parse it into a json string using the JSON.stringify method and on the next page parse the string into an array using the JSON.parse method

Parent

{array.map((item) => (
          <Grid key={item} item>
            <Card
              label={item.title}
              onClick={() =>
                router.push({
                  pathname: "/page",
                  query: {
                    title: item.title,
                    reviews: JSON.stringify(item.reviews),
                  },
                })
              }
            />
          </Grid>
        ))}

function index() {
  const router = useRouter();


  useEffect(() => {
    if (!router.isReady) return;
    console.log(router.query);
    console.log(JSON.parse(router.query.reviews))
  }, [router.isReady]);


  const Reviews = () =>
      <ReviewCard
        reviewsList={JSON.parse(router.query.reviews)}
      />
    );

  return (
      <Box>
          <Typography>{router.query.title}</Typography>
          <Reviews />
      </Box>
  );
}

export default index;

Anish Antony · Accepted Answer · 2022-07-01 19:26:43Z

0

It happens when the array item is a JSON object.You can pass array but not array of objects.

 router.push({
                  pathname: "/planterupdate",
                  query: {
                    title: "test",
                    textArray: ["1","2","3","4"],//will work
                    reviews: [{num:1},{num:2},{num:3},{num:4}],//will not work
                    numArray: [5,6,7,8],//will work
                  },
                })

Sample log of query {title: 'test', textArray: Array(4), reviews: Array(4), numArray: Array(4)} numArray: (4) ['5', '6', '7', '8'] reviews: (4) ['', '', '', ''] textArray: (4) ['1', '2', '3', '4'] title: "test"

answered Jul 1, 2022 at 19:26

Anish Antony

1,52511 silver badges13 bronze badges

Collectives™ on Stack Overflow

Next.JS router.query returns undefined for arrays

2 Answers 2

Parent

Next Page

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Parent

Next Page

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related