react Link태그 path로 경로가 넘어가지지 않는 현상 ㅠ

Question

정확히 말씀드리자면 0.1초정도 경로로 넘어갔다가 다시 home으로 회귀하는 현상입니다.. 코드는 로그인과 회원가입을 게시판을 위해 짜본코드이구요 django rest API 와 연결까지 잘 마친듯 합니다그런데 다 하고보니 Borad로 경로가 넘어가지지않아서요 .. 처음에는 가장상위의 App.js에 UseEffect때문인가 싶어서 App.js의 모든 UseEffect를 주석처리 해봤으나 똑같은 현상이 발생했구요..두번째로는 path경로를 다른경로로 설정해봤는데 아무것도 없는 페이지로 잘 이동되는것도 확인했습니다그런데 Router exact path를 Link의 path와 똑같이 따라 줬더니 똑같은 현상이 발생합니다..여기서부터는 어디를 손봐야할지 감이 잘 안잡혀서요.. 코드 참조 부탁드립니다. App.jsimport React, {useState, useEffect} from 'react'; import Header from './components/Header'; import Navi from './components/Navi' import Board from './components/Board'; import LoginModal from './components/LoginModal'; import { Route } from 'react-router-dom'; import './App.css' function App() { const [modal, setModal] = useState(false); const [user, setUser] = useState() let [isAuthenticated, setisAuthenticated] = useState(localStorage.getItem('token') ? true : false) const userHasAuthenticated = (authenticated, username, token) => { //회원가입이나 로그인이 성공했을 때 토큰을 저장 setisAuthenticated(authenticated) setUser(username) localStorage.setItem('token', token); } useEffect(()=>{ if(isAuthenticated){ setModal(true) } else{ setModal(false) } },[isAuthenticated]) const handleLogout = () => { //로그아웃 setisAuthenticated(false) setUser("") localStorage.removeItem('token'); setModal(false) } useEffect(() => { // 토큰(access token)이 이미 존재하는 상황이라면 서버에 GET /validate 요청하여 해당 access token이 유효한지 확인 if (isAuthenticated) { // 현재 JWT 토큰 값이 타당한지 GET /validate 요청을 통해 확인하고 // 상태 코드가 200이라면 현재 GET /user/current 요청을 통해 user정보를 받아옴 fetch('http://localhost:8000/validate/', { headers: { Authorization: `JWT ${localStorage.getItem('token')}` } }) .then(res => { fetch('http://localhost:8000/user/current/', { headers: { Authorization: `JWT ${localStorage.getItem('token')}` } }) .then(res => res.json()) .then(json => { // 현재 유저 정보 받아왔다면, 로그인 상태로 state 업데이트 하고 if (json.username) { setUser({ username: json.username }); } // Refresh Token 발급 받아 token의 만료 시간 연장 fetch('http://localhost:8000/refresh/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: localStorage.getItem('token') }) }) .then(res => res.json()) .then((json)=>{ userHasAuthenticated(true, json.user.username, json.token); }) .catch(error => { console.log(error); });; }) .catch(error => { handleLogout(); }); }) .catch(error => { handleLogout(); }); } },[isAuthenticated]) return (

); } export default App; Header.js import React, { useState } from 'react'; import {Link} from 'react-router-dom'; import '../css/Header.css'; import nomalImage from '../img/red.jpg'; function Header(props){ const [userprofile, setUserprofile] = useState(false) return( <>

Velog { props.modal === false ? : ( <>

{setUserprofile(!userprofile)}}>

{ userprofile === true ?(

내가 쓴 글

임시 글

내 정보

로그아웃

) :null } ) }

) } export default Header; Board.js import React from 'react'; import '../css/Board.css'; import { useHistory } from 'react-router' function Board(){ const histoty = useHistory() return( <>

) } export default Board; Link와 Router는 알아보기 편하시라고 표시해뒀습니다 !그리고 아래의 코드는 별개로 로그인과 회원가입을 거의 끝낸 코드인데 혹시 보안이라던지 리팩토링이라던지 보완할 부분이 있는지 봐주시면 감사하겠습니다! LoginModal.js import React, { useState } from 'react'; import { useHistory } from 'react-router' import '../css/LoginModal.css'; import GoogleLogin from 'react-google-login'; function LoginModal(props){ let [JoinLoign,setJoinLogin] = useState('로그인') const history = useHistory() //구글 아이디로 회원가입 및 이미 회원일경우 let responseGoogle = (res)=>{ let email = res.profileObj.email let id_token = res.profileObj.googleId let data = { username: email, password: id_token, provider: 'google' } fetch('http://localhost:8000/user/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(res => res.json()) .then(json => { if (json.username && json.token) { props.userHasAuthenticated(true, json.username, json.token); props.setModal(true); history.push("/"); }else{ // 서버에 Google 계정 이미 저장돼 있다면 Login 작업 수행 // 로그인을 시도하기 전에 서버에 접근하기 위한 access token을 발급 받음 fetch('http://localhost:8000/login/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(res => res.json()) .then(json => { // 발급 완료 되었다면 해당 토큰을 클라이언트 Local Storage에 저장 if (json.user && json.user.username && json.token) { props.userHasAuthenticated(true, json.user.username, json.token); props.setModal(true); history.push("/"); } }) .catch(error => { console.log(error); window.gapi && window.gapi.auth2.getAuthInstance().signOut(); }); } }) .catch(error => { console.log(error); window.gapi && window.gapi.auth2.getAuthInstance().signOut(); }); }//구글 아이디로 회원가입 및 이미 회원일경우 let [username, setUsername] = useState() let [userpassword, setUserPassword] = useState() const data = {username : username, password : userpassword} const handleNameChange = (e) => { setUsername(e.target.value) } const handlePasswordChange = (e) => { setUserPassword(e.target.value) } return( <>

{JoinLoign}

{ JoinLoign === '로그인' ?( <> ) :( <> ) }

소셜 계정으로 {JoinLoign}

( )} buttonText="" clientId="161501678517-il8gdqt5ak46nuh9r2oku23aeebg5f53.apps.googleusercontent.com" onSuccess={responseGoogle} onFailure={responseGoogle} cookiePolicy={'single_host_origin'}/>

{ JoinLoign === '회원가입' ? ( <> 이미 회원이신가요 ?

{ e.preventDefault() setJoinLogin('로그인') }}>로그인

) : ( <> 아직 회원이 아니신가요 ?

{ e.preventDefault() setJoinLogin('회원가입') }}>회원가입

) }

) } export default LoginModal; 긴 글 읽어주셔서 감사합니다 .

경직학 · Accepted Answer

해결했습니다 ! board.js 파일에이부분을 onClick={()=>{history.goback()}} 으로 수정했습니다 !

react Link태그 path로 경로가 넘어가지지 않는 현상 ㅠ

1개의 답변

Q&A 목록