[React] react-router가 정상적으로 작동하지 않을 때

velog의 개발자 velopert님의 자료로 react-router를 학습하는 중, 페이지가 정상적으로 작동하지 않는 현상을 겪었다.

찾아보니 react-router-dom 버전에 따라 사용 방법에 차이가 있었다.

//v5
<Route path="/" exact={true} component={Home} />
<Route path="/about" component={About} />

//v6 
<Routes>
  <Route path="" element={<Home />} />
  <Route path="about" element={<About />} />
</Routes>

v5 버전의 react-router 코드를 v6 버전으로 바꾸는 방법은 다음과 같다.

1.Route 컴포넌트들을 Routes 컴포넌트 안에 넣어준다.
2.path 경로의 '/' 를 제거한다.
3.component 속성을 element 속성으로 수정하고, 안에 컴포넌트를 넣어준다.

이후 정상적으로 작동하는 모습을 확인할 수 있었다.

Reference
1. 프로젝트 준비 및 기본적인 사용법
react router가 동작하지 않을 때