React 반응 라우터를 사용하고 로그인 후 useNavigate를 사용할 때 홈페이지로 리디렉션이 효과가 없는 이유는 무엇입니까?

Question

<p>로그인 성공 후 사용자를 홈페이지로 리디렉션하고 싶고 사용자 로그인 API 요청 데이터를 currentUser라는 변수에 저장하므로 currentUser가 true인 경우 홈페이지로 리디렉션해야 합니다. 로그인 요청을 처리하는 방법은 다음과 같습니다. </p> <pre class="brush:php;toolbar:false;">export const AuthContextProvider = ({ 하위 }) => const [currentUser, setCurrentUser] = useState( JSON.parse(localStorage.getItem("사용자")) || ); const 로그인 = 비동기(입력) => const res= axios.post("https://micacarballo-social-media-api.onrender.com/api/v1/auth/login",inputs,{ }) setCurrentUser(res.data) }; useEffect(() => { localStorage.setItem("사용자", JSON.stringify(currentUser)); }, [현재사용자,로그인]); const updateUser = 비동기 () =>{ const user = JSON.parse(localStorage.getItem("사용자")) const res= axios.get("https://micacarballo-social-media-api.onrender.com/api/v1/users/me/",{ 헤더: { 승인: `jwt ${user.token}` } }) setCurrentUser(res.data) } 반품 ( <AuthContext.Provider 값={{ currentUser, login, updateUser}}> {어린이들} </AuthContext.Provider> ); };</pre> <p>내 보호 경로:</p> <pre class="brush:php;toolbar:false;">'./context/authContext'에서 { AuthContext } 가져오기 함수 앱() { const { currentUser } = useContext(AuthContext); const 레이아웃 = ()=>{ 반품( <div> <나브바 /> <div style={{ 디스플레이: "flex" }}> <왼쪽바 /> <div 스타일={{ flex: 6 }}> <아울렛/> </div> </div> </div> ) } const ProtectedRoute = ({어린이}) =>{ if(!현재사용자){ return <다음으로 이동="/login" /> }자식을 돌려보내다 } const 라우터 = createBrowserRouter([ { 경로: "/", 요소: ( <보호된 경로> <레이아웃/> </보호된 경로> ), 어린이들 :[ { 경로:"/", 요소: <홈 /> },{ 경로:"/profile/:id", 요소:<프로필 /> } ] }, { 경로: "/로그인", 요소: <로그인 />, }, { 경로: "/등록", 요소: <등록 /> }, ]); 반품 ( <div className="앱"> <RouterProvider 라우터={라우터} /> </div> ) } 기본 앱 내보내기</pre> <p>내가 좋아하는 화면:</p> <pre class="brush:php;toolbar:false;">const 로그인 = () => { const [입력, setInputs] = useState({ 이메일: "", 비밀번호: "", }); const [err, setErr] = useState(null); const [isLoading, setIsLoading] = useState(false); // 스피너 로딩을 위한 상태 변수 const 탐색 = useNavigate() const handlerChange = (e) => { setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value })); }; const {login} = useContext(AuthContext) const handlerLogin = async (e) => { e.preventDefault(); 노력하다 { setIsLoading(true); // 로딩을 true로 설정 로그인(입력)을 기다립니다; 탐색("/") } 잡기 (오류) { setErr(err.response.data); }마지막으로 { setIsLoading(false); // 로딩을 다시 false로 설정 } }; 반품 ( <div className='login'> <div className="카드"> <div className="왼쪽"> <h1>소셜마이카</h1> <p> 친구들과 쉽고 재미있게 소통해보세요 </p> <span>아직 계정이 없으신가요?</span> <링크="/등록"> <button>등록</button> </링크> </div> <div className="오른쪽">

로그인

<양식 작업=""> <입력 유형="이메일" 자리 표시자='이메일' 이름='이메일' onChange={handleChange}></input> <입력 유형="password"placeholder='password' name='password' onChange={handleChange}/> {오류 &"잘못된 이메일 또는 비밀번호"} <button onClick={handleLogin}enabled={isLoading}> {isLoading ? <로그인/> </양식> </div> </div> </div> } 기본 로그인 내보내기</pre> <p>사용자가 로그인하고 currentUser에 데이터가 저장된 후에 이것이 작동하지 않는 이유를 이해할 수 없습니다. 리디렉션 없이 로그인 페이지가 새로 고쳐지고 홈 페이지에 수동으로 액세스해야 합니다. 로그인 페이지의 handlerSubmit 함수에서 탐색을 ("/register")로 변경해 보았지만 제대로 작동하지만 Navigate('/')</p>

Answer 1

경로를 바꾸세요 /home 不仅仅是 / 마치

으아악

잘 작동할 거예요