next.js에서 Router를 통해 props 기능 구현

https://velog.io/@sbinha/next.js-Router를-통해-props-기능-구현

 

리액트에서 useHistory로 데이터를 보내고 useLocation으로 데이터를 받는 방법을 next.js에서 next/router로 가능하다

 

회원가입시 입력한 아이디와 비밀번호를 입력하고 서브밋하면 로그인창으로 이동 후, 로그인 입력폼에 전달되어, 사용자가 다시 아이디와 비밀번호를 입력할 필요가 없는 용도로 썼다

 

import Router from "next/router";

...

    const query = { userId: String(userId), password: String(password), queryMsg: "Account created. Please log in." };

    Router.push({ pathname: "/login", query });

...

 

import Router, { useRouter } from "next/router";

...

  const uRouter = useRouter();
  
  ...

  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
    getValues,
    clearErrors,
  } = useForm<LoginForm>({
    defaultValues: {
      userId: uRouter?.query?.userId || "",
      password: uRouter?.query?.password || "",
    },
  });
  
  ...
  
  return (
    <div>
     	...
        {uRouter.query.queryMsg && (
          <>
            <span>{uRouter?.query?.queryMsg}</span>
            <br />
          </>
        )}
        ...
    </div>
  );
};

...