소개
게시글
질문&답변
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
- 200
질문&답변
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.8K