React-Router-Dom v.6

elinapark·2022년 3월 14일
0

react-router-dom v.6 을 사용하면서
v.5 와 다른 점을 정리해보았다.

App.jsx 에 적용한 react-router-dom

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  const [isLogin, setIsLogin] = useState(false);
  
  const Login = () => {
    setIsLogin(true)
    }
  
  const Logout = () => {
    const Out = async () => {
      try{
       cosnt res = await axios.get("~~Logout Path~~")
       } cath (err) {
         console.log(err)
        }
      };
      Out()
      setIsLogin(false)
    }
  

return (
  <BrowserRouter>
    <header>
      <Navbar/>
    </header>
      <Routes>
          <Route 
              path="/"
              element={<Home />} 
          />
        
          <Route
              path="/myPage"
              element={<MyPage isLogin={isLogin} />}>
              <Route 
                  path="" 
                  element={<UserInfo />}
              />
              <Route
                  path="userDelete"
                  element={<UserDelete />}
              />
          </Route>
        
      </Routes>
  </BrowserRouter>
  );
}

export default App;

MyPage.jsx 에 적용한 react-router-dom

import { Link, Outlet, useNavigate } from "react-router-dom";

function MyPage({ isLogin }) {
	const navigate = userNavigate();
    
    useEffect(() => {
      const IsLogged = () => {
		try {
			if (isLogin) {
				navigate("/")
				}
          	} catch (err) {
              console.log(err);
            	}
          };
		IsLogged();
	}, [isLogin, navigate])

	return(
    	<div>
        	<Link to=""> 회원정보 수정 </Link>
            <Link to="userDelete"> 회원탈퇴 </Link>
            <div>
            	<Outlet/>
            </div>
        </div>
    );
  }
  
export default MyPage;

component -> element 로 변경

react router dom v5

<Route 
	path="/"
	component={<Home />} 
/>

react router dom v6

<Route 
	path="/"
	element={<Home />} 
/>

서브라우터 추가하기

상위 라우트 안에 서브라우터 생성 후 path를 설정한다.

<Route
	path="/myPage"
	element={<MyPage isLogin={isLogin}/>} 
      />
              <Route 
                  path="" 
                  element={<UserInfo />}
              />
              <Route
                  path="userDelete"
                  element={<UserDelete/>}
              />
</Route>

useHistory 에서 useNavigate로 변경. push 없어짐

react router dom v5

const history = useHistory()

history.push("/")

react router dom v6

const navigate = userNavigate();

navigate("/")
profile
틀린 내용이나, 개선해야 할 사항을 발견하신다면 댓글로 편하게 남겨주세요. 감사합니다.🙇

0개의 댓글