작성
·
1K
5
여기 커뮤니티 글을 보면
withRouter 작성이 필요하다고 적혀있는데,
react router가 업데이트 되면서
withRouter가 아닌 useNavigate로 변경되었습니다.
// This is a React Router v6 app
import { useNavigate } from "react-router-dom";
function App() {
let navigate = useNavigate();
function handleClick() {
navigate("/home");
}
return (
<div>
<button onClick={handleClick}>go home</button>
</div>
);
}
답변 1
3
감사합니다 덕분에 해결할 수 있었습니다.
저는 이런 식으로 고쳤습니다.
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { registerUser } from "../../../_action/user_action";
import { useNavigate } from "react-router-dom";
function RegisterPage(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
const [Email, setEmail] = useState("");
const [Name, setName] = useState("");
const [Password, setPassword] = useState("");
const [ConfirmPassword, setConfirmPassword] = useState("");
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value);
};
const onNameHandler = (event) => {
setName(event.currentTarget.value);
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value);
};
const onConfirmPasswordHandler = (event) => {
setConfirmPassword(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
event.preventDefault();
if (Password !== ConfirmPassword) {
return alert("비밀번호와 비밀번호 확인은 같아야 합니다.");
}
let body = {
email: Email,
password: Password,
name: Name,
};
dispatch(registerUser(body)).then((response) => {
if (response.payload.success) {
alert("회원가입이 완료되었습니다.");
navigate("/login");
} else {
alert("회원가입 중 오류가 발생했습니다.");
}
});
};
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
}}
>
<form
style={{ display: "flex", flexDirection: "column" }}
onSubmit={onSubmitHandler}
>
<label>Email</label>
<input type="email" value={Email} onChange={onEmailHandler} />
<label>Name</label>
<input type="text" value={Name} onChange={onNameHandler} />
<label>Password</label>
<input type="password" value={Password} onChange={onPasswordHandler} />
<label>Confirm Password</label>
<input
type="password"
value={ConfirmPassword}
onChange={onConfirmPasswordHandler}
/>
<br />
<button type="submit">회원 가입</button>
</form>
</div>
);
}
export default RegisterPage;