react router가 동작하지 않을 때

새로운 프로젝트 생성 후 react-router-dom을 통해 라우팅 기능을 구현하려고 했는데, 의도한대로 동작하지 않는 상황이 있었다.

 

문제의 원인은 react-router-dom의 버전에 따라 사용방법이 상이할 수 있으므로, 버전에 맞는 방법을 사용하면 된다.

 

먼저 프로젝트의 package.json 파일에서 react-router-dom의 버전을 확인한다.

 

필자의 경우

react-router-dom": "^6.0.2

6버전의 react-router-dom을 사용하고 있었으므로, 

 

버전에 맞는 방식으로 속성을 변경해준 후 정상적으로 작동했다.

 

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

path 속성의 / 제거

component 속성을 element로 변경