React-Roter v6

1. react-router v6

- 현재 프로젝트에서 사용 중! 

- Switch, component, usehistory 등은 사라졌으니 옜날 글을 보고 혼동하지 말도록 조심하자..!

 

아래는 현재까지 사용해본 기능들 

 

2. Routes

- Switch문 대신 <Routes /> 컴포넌트 안에 <Route /> 컴포넌트들을 배치한다. 

 

3. element

<Route path="/main" element={<MainPage />} />

와 같이 사용 component, children등을 더이상 사용하지 않음..! 

 

4. useNavigate, <Navigate />

- usehistory 같은거 사용하지 않음

- useNavigate은 함수이다. 

- <Navigate />은 컴포넌트이다. 

const navigate = useNavigate();

navigate('/'); // 해당주소로 이동
navigate(-1); // 이전페이지로 이동

 

4. PrivateRoute -> 구현방법이 v5와는 조금 달라졌다. 

 

 

🔐 Private Route in react-router v6 - DEV Community

🔐 Private Route in react-router v6

React Router v5 → v6 빠르게 훑어보기 - YouTube