게시글
질문&답변
2021.11.10
인증 체크 부분 app..js 부분 질문이요
안녕하세요! 저도 마찬가지로 react-router-dom v6를 사용해서 꽤 문법이 많이 달라져서 많이 찾아보고 강의들었어요! 제 글 참고하시고 도움되시면 좋겠습니다. hoc/auth.js import React from "react"; import { useDispatch } from "react-redux"; import { authUser } from "../_actions/user_action"; import { useNavigate } from "react-router-dom"; export default function Auth({ SpecificComponent, option, adminRoute = null }) { const dispatch = useDispatch(); const navigate = useNavigate(); dispatch(authUser()).then((response) => { if (!response.payload.isAuth) { // 로그인 하지 않은 상태 if (option) { navigate("/login"); } } else { // 로그인 한 상태 if (adminRoute && !response.payload.isAdmin) { navigate("/"); } else { if (option === false) { navigate("/"); } } } }); return SpecificComponent />; } App.js import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/LandingPage"; import LoginPage from "./components/views/LoginPage/LoginPage"; import RegisterPage from "./components/views/RegisterPage/RegisterPage"; import Auth from "./hoc/auth"; function App() { // Auth option // null -> 누구나 접근 가능 // true -> 로그인 한 유저만 접근 가능 // false -> 로그인 한 유저는 접근 불가능 return ( Router> Routes> Route path="/" element={Auth SpecificComponent={LandingPage} option={null} />} /> Route path="/login" element={Auth SpecificComponent={LoginPage} option={false} />} /> Route path="/register" element={Auth SpecificComponent={RegisterPage} option={false} />} /> Routes> Router> ); } export default App;
- 0
- 2
- 303
질문&답변
2021.11.09
props.history.push('/') 에서 자꾸 에러가 발생합니다.
위 방법으로도 안되시는 분들은 여기 참고하셔도 좋을것 같아요! 저처럼 react-router-dom v6 사용하시는 분들은 import { useNavigate } from "react-router-dom"; LoginPage 함수 내부에서 아래 처럼 선언 해주시고 const navigate = useNavigate(); dispatch promise then 부분에 if (response.payload.loginSuccess) { navigate(-1); } else { ... } 저는 이런 식으로 해서 해결했습니다. 좋은 강의 잘 듣고 있습니다~~!!
- 2
- 5
- 4.9K