如何修复在Nextjs Router中重新加载后丢失的查询参数，同时保持URL干净？

jgzswidk 于 2023-08-04 发布在其他

关注(0)|答案(1)|浏览(145)

我尝试使用以下语法通过router.push向Next.js中的[roomid] page (src/pages/editor/[roomid].tsx)传递一些数据，但希望URL保持清晰，因为用户可以在URL中编辑他们的用户名。
在第一次加载时，router.query持久化username（在查询中传递）。但是重新加载后，username不存在。
JoinRoom.tsx:两个字段（用户名和roomid）。当按下提交时，用户被定向到/[roomid]：

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

字符串
然后在[roomid].tsx中：

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

型
重装后username出现undefined。
我试着在[roomid].tsx中使用以下内容，但没有运气，重新加载后用户名仍然不存在。

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

型

next.js

来源：https://stackoverflow.com/questions/76786846/how-to-fix-query-parameters-lost-after-reloading-in-nextjs-router-when-keeping-u

1条答案

按热度按时间

isr3a4wc1#

这是我的解决方案。

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;

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

如何修复在Nextjs Router中重新加载后丢失的查询参数，同时保持URL干净？

1条答案

相关问题

热门标签

最新问答