Posts
Q&A
์ธ์ฆ ์ฒดํฌ ๋ถ๋ถ 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
- 356
Q&A
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
- 5K