Next.js에서 창 값 복원

React Router 및 Nextjs의 차이

다음 형식의 기능을 고려하다.

양식 입력

표 확인화면

양식 입력으로 돌아갑니다.이때 입력한 물건은 보류됩니다.

2-3 React Router 사용 시 locationstate에 입력한 값을 저장하고 가져오지만 Next입니다.js에 유사한 기능이 없기 때문에 검색 매개 변수에 저장됩니다.
다음은 요약 코드입니다.

사용자 지정 바닥글

useQueryState.ts

const hasKeys = (object: Record<string, unknown>, keys: string[]) => {
  for (const key of keys) {
    const valid = Object.prototype.hasOwnProperty.call(object, key);
    if (!valid) return false;
  }

  return true;
};

/**
 * Set initial state from query object.
 *
 * @param defaultState Default state when empty or invalid query.
 */
const useQueryState = <T extends Record<string, string>>(defaultState: T) => {
  const { query } = useRouter();
  const [values, setValues] = useState<T>(defaultState);

  useEffect(() => {
    if (hasKeys(query, Object.keys(defaultState))) {
      setValues(query as T);
    }
  }, [defaultState, query]);

  return [values, setValues] as const;
};

export default useQueryState;

router state.query와 연결되어 있습니다.지정한 키가 있으면 그것을 적용하고, 없으면 기본값을 설정합니다.

창문체

type Values = {
  username: string;
  comment: string;
};

const initialValues: Values = {
  username: "",
  comment: "",
};

const Home: NextPage = () => {
  const router = useRouter();
  const [values, setValues] = useQueryState(initialValues);

  const handleChange = (e: React.ChangeEvent<any>) => {
    setValues((prevValues) => ({
      ...prevValues,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubimit = (e: React.FormEvent<any>) => {
    e.preventDefault();

    router.push({
      pathname: "/confirm",
      query: values,
    });
  };

  return (
    <div>
      <Head>
        <title>Post</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>Post</h1>

        <form onSubmit={handleSubimit}>
          <div>
            <label htmlFor="username">username</label>
            <input
              type="text"
              id="username"
              name="username"
              value={values.username}
              onChange={handleChange}
            />
          </div>

          <div>
            <label htmlFor="comment">comment</label>
            <input
              type="text"
              id="comment"
              name="comment"
              value={values.comment}
              onChange={handleChange}
            />
          </div>

          <button>Post</button>
        </form>
      </main>
    </div>
  );
};

export default Home;

양식 확인 화면

const Confirm: NextPage = () => {
  const router = useRouter();

  const goBack = () => {
    router.push({
      pathname: "/",
      query: router.query,
    });
  };

  return (
    <div>
      <Head>
        <title>Confirm</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>Confirm</h1>

        <ul>
          <li>username: {router.query.username}</li>
          <li>comment: {router.query.username}</li>
        </ul>

        <button onClick={goBack}>Back</button>
      </main>
    </div>
  );
};

export default Confirm;

Reference

이 문제에 관하여(Next.js에서 창 값 복원), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/yhase_rqp/articles/6230dbb9453fd2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다