Why does my id i get from next js router.query return undefined on refresh?

Question

I am using the id gotten from next router.query to render elements dynamically it works when i access the room from next/link but when i refresh the page it throws this error

here is my code (note: roomId here was gotten from const {roomId} = router.query):

return (
    <>
      <div className={styles.header}>
        <div className={styles.title}>{rooms[roomId].name}</div>
        <div className={styles.headerCon}>
          <div className={styles.roomUsers}>
            <AvatarGroup
              max={3}
              total={Object.keys(rooms[roomId].users).length}
            >
              {Object.keys(rooms[roomId].users).map((user) => (
                <Avatar
                  key={user + Math.random()}
                  alt={users[user].name}
                  src={users[user].profile_pic}
                />
              ))}
            </AvatarGroup>
          </div>

          <div className={styles.headerIcons}>
            <div className={styles.react}>
              <AddReactionOutlinedIcon />
            </div>
            <div className={styles.notif}>
              <NotificationsNoneOutlinedIcon />
            </div>
            <div className={styles.more}>
              <MoreHorizOutlined />
            </div>
          </div>
        </div>
      </div>
      {user.name === rooms[roomId].createdBy.name ? (
        <div className={styles.begin}>
          {!roomActive ? (
            <button onClick={handleStartSession}>Start</button>
          ) : (
            <button onClick={handleEndSession}>End</button>
          )}
        </div>
      ) : (
        ""
      )}
      <div className={styles.participators}>
        <div className={styles.pAvatars}>
          <Avatar
            alt={rooms[roomId].createdBy.name}
            src={rooms[roomId].createdBy.profile_pic}
          />
          <div className={styles.userName}>{rooms[roomId].createdBy.name}</div>
          <div className={styles.userRole}>Admin</div>
          <div>
            <audio autoPlay ref={userAudio} />
            {peers.map((peer, index) => {
              return <Audio key={index} peer={peer} />;
            })}
          </div>
        </div>
        {Object.keys(rooms[roomId].users)
          .filter((user) => users[user].name !== rooms[roomId].createdBy.name)
          .map((user) => (
            <div className={styles.pAvatars} key={Math.random() + user}>
              <Avatar alt={users[user].name} src={users[user].profile_pic} />
              <div className={styles.userName}>{users[user].name}</div>
              <div className={styles.userRole}>Admin</div>
            </div>
          ))}
      </div>
    </>
  );
}

As you can see much of what i am rendering on this page depends on that id, so can someone please help?

Yeah, as i said it renders when i enter the page, but throws an error when the page is refreshed — Jeoffrey Duke, Jun 28 '22 at 12:24

score 3 · Accepted Answer · answered Jun 28 '22 at 12:20

3

You try to access the query parameter before its state is ready. There is a workaround to solve this problem.

  import { useRouter } from 'next/router';
  const router = useRouter();
  useEffect(() => {
    if (router.isReady) {
      // Do your stuff
      // for example: assign query param to a state
    }
  }, [router.isReady]);

answered Jun 28 '22 at 12:20

Eren Yatkin

186
2
9

now it just throws the same error but to the state i assigned – Jeoffrey Duke Jun 28 '22 at 12:28
Alright, it works, but now problem seems to be originating from elsewhere – Jeoffrey Duke Jun 28 '22 at 12:47
1

Best way to track the root cause is simplifying the component and add the codes step by step. That way you can find the root cause. @JeoffreyDuke – Eren Yatkin Jun 29 '22 at 13:18

Why does my id i get from next js router.query return undefined on refresh?

1 Answers1

Linked