react 로그인 페이지 이동 관련

Question

여러 시도를 해봤는데 안돼서 여쭤 보려고 합니다아래 두개 사진은 로그인전/후 입니다(네비게이션 바는 메인페이지에서 뺄 예정입니다)한 블로그를 보고 따라하는데 제가 하고 있는 프로젝트 특성상 개인/기업으로 로그인창이 두개 입니다그래서 메인 페이지를 통해 로그인하면 바로 구인/구직 페이지로 이동하게 할 예정입니다따로 로그인 페이지로 이동해서 로그인을 하면 설정한 페이지로 이동이 잘 되지만 해당 프로젝트는 로그인 페이지로 이동을 안하고메인에서 로그인을 진행 하는데 로그인을 해도 페이지는 이동도 안하고 로그인창도 켜져있는 상황입니다어디를 수정해야하는지 알려 주시면 감사하겠습니다// 제가 디자인 센스가 더럽게 없어서 그러는데 혹시 메인페이지를 빼고 다른 잡코리아 잡플래닛처럼 구직페이지를 메인으로 하는게 좋을까요?로그인import axios from "axios"; import {toast, ToastContainer} from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import {Formik, ErrorMessage} from "formik"; import * as Yup from "yup"; import {Button, TextField} from "@mui/material"; import {useNavigate, useSearchParams} from "react-router-dom"; // SignUp 컴포넌트 scss 이용 import "../css/signUp.scss"; import {useDispatch} from "react-redux"; import {setToken} from "../redux/reducers/AuthReducer"; const Login = () => { const navigate = useNavigate(); // 쿼리 파라미터 받아오기 const [searchParams, setSearchParams] = useSearchParams(); const dispatch = useDispatch(); const validationSchema = Yup.object().shape({ pid: Yup.string() .required("아이디를 입력하세요."), password: Yup.string() .required("패스워드를 입력하세요.") }); const submit = async (values) => { const {pid, password} = values; try { const {data} = await axios.post("/api/auth/signIn", { pid, password, }); dispatch(setToken(data.jwt)); const redirectUrl = searchParams.get("redirectUrl"); toast.success(

로그인 성공

, { position: "top-center", autoClose: 1000 }); // redirectUrl이 쿼리스트링으로 존재하면 // 원래가고자 했던 페이지로 돌아가기 setTimeout(()=> { if (redirectUrl) { navigate(redirectUrl); } else { navigate("/add-board"); //메인페이지에 네비게이션바가 없기 때문에 로그인 하면 add-board로 이동해야합니다 } }, 1000); } catch (e) { // 서버에서 받은 에러 메시지 출력 toast.error(e.response.data.message + "", { position: "top-center", }); } }; return ( {({values, handleSubmit, handleChange}) => (

)} ); }; export default Login;메인import { useState } from 'react'; import PersonLogin from "./Loginp"; import EnterLogin from "../form/Logine"; import Enter from '../images/enter.png'; import Person from '../images/person.png'; import "../css/main.css"; const Home = () => { const [enter, setEnter] = useState(false); const [person, setPerson] = useState(false); function eOnClick(){ setEnter(!enter); setPerson(person ? false : false); } function pOnClick(){ setEnter(enter ? false : false); setPerson(!person); } return (

{enter ? ( ) : (

구인을 원하는 기업 회원 이라면
아래 버튼을 눌러주세요.

)}

{person ? ( ) : (

구직을 원하는 개인 회원 이라면
아래 버튼을 눌러주세요.

)}

) } export default Home;

Hit히트 · Answer

로그인이 됐는지는 확인하셨나요? redirectUrl이 제대로 넘어 왔는지 한번 확인해보세요.

react 로그인 페이지 이동 관련

1개의 답변

#onclick 목록