[React Router V6] 리액트 라우터 v6에서 경로 지정하기

최근 React Router V6가 업데이트 됨에 따라 새로운 버전에서 경로 지정하는 방법을 알아보고, 적용.

 

App 컴포 라우팅

BrowserRouter as Router

기존 Router > Switch > Route

v6 Router > Routes > Route

 

Route를 Switch 한다는 뜻에서 Switch 였던거 같은데 Route들의 집합인 Routes로 바뀜.

 

중첩 Route에서도 <Router>을 추가해줬어야 했는데 Routes로 바뀐 후로는 Router을 추가할 필요 없어짐.

 

기존 Router > Switch > Route(Router > Switch > Route)

v6 Router > Routes > Route(Routes > Route)

 

라우트 설정 방법도 바뀌었는데

기존

<Route

  exact path="주소" component={렌더할 컴포넌트}

/>

v6

<Route

 path="상대주소 or /절대주소" element={ <렌더할 컴포넌트 />

/>

ManagerRoute 컴포 라우팅

 

path 에 값을 입력할때 

 1. 기본이 exact로 설정된다. 앞 경로 전체 인식을 위해선 /* 를 마지막에 입력한다.

 2. / 를 입력하면 절대주소로 인식하고 /를 제외한 값을 입력하면 상대주소로 입력할 수 있게된다.

 

중첩 라우팅일때 상위 라우트 값에 + 하는 방식.

ex

A

 Route path="/aa/*" element={<B />}

 

B

  Route path="bb/*" element={ <C />}

일때 C 컴포넌트 path는 /aa/bb/*가 된다.

 

만약 B 컴포넌트에서 path="bb" 로 입력하면 C컴포넌트는 오직 /aa/bb 일때만 렌더링된다.

 

또한 v5에선 props로 history match 등이 자동입력됐는데 v6에선 props로 아무 데이터도 넘어오지 않음..

history를 쓰기 위해선 useNavigate()를 받아서 사용한다.

const navigate = useNavigate();

navigate('경로') 이때 경로 또한 Route path처럼 절대경로, 상대경로 설정이 가능하다.

경로 값은 이전 history때와 사용법이 동일하다.

 

history.location을 사용하기 위해선 useLocation()을 받아서 사용한다.

const location = useLocation();

location.pathname ... 등