0

I'm trying to pass some data over router.push to a [roomid] page (src/pages/editor/[roomid].tsx) in Next.js using the following syntax, but want the URL to remain clear, as the user can just edit their username in the URL otherwise.

On the first load, router.query does persist username (passed in query). However, after reloading, username doesn't persist.

JoinRoom.tsx: two fields (username and roomid). when submit is pressed, user is directed to /[roomid]:

router.push({
    pathname: `/editor/${roomId}`,
    query: { username: username, }
}, `/editor/${roomId}`,

then in [roomid].tsx:

const router = useRouter();
const { roomid, username } = router.query;

after reloading, username comes undefined.

I've tried using the following in [roomid].tsx , but no luck, username still doesnt persist after reloading.

const [username, setUsername] = useState('');
useEffect(() => {
    if (router.isReady) {
        console.log(router.query);
        setUsername(router.query.username as string);
    }
}, [router.isReady]);
ransom
  • 173
  • 1
  • 9

1 Answers1

0

Here's my solution.

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

const MyPage = () => {
  const router = useRouter();
  const { roomid } = router.query;
  const [username, setUsername] = useState('');

  useEffect(() => {
    if (localStorage.getItem('username')) {
      setUsername(localStorage.getItem('username') as string);
    } else if (router.query.username) {
      setUsername(router.query.username as string);
      localStorage.setItem('username', router.query.username as string);
    }
  }, [router.query.username, router]);

  return (
    <div>
      <h1>Room ID: {roomid}</h1>
      <p>Username: {username}</p>
    </div>
  );
};

export default MyPage;
Diego Ammann
  • 463
  • 7