코딩공부방

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

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

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

필자의 경우

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

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

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

path 속성의 / 제거

component 속성을 element로 변경

니코쌤 강의 도중 github page에 배포하는 부분에서 오류가 발생했다.

1. A branch named 'gh-pages' already exists.

검색해보니 node_modules/.cache/gh-pages 폴더 삭제하면 됨

2. remote: Permission to gogoadl/movie_app_2021.git denied to AdamPark0030.
fatal: unable to access 'https://github.com/gogoadl/movie_app_2021.git/': The requested URL returned error: 403

이건 최초로 git에 등록한 계정과 배포에 사용할 계정이 다를경우 발생하는데, Windows 사용자 기준으로

Windows 키 > 자격 증명 관리자 > 일반 자격 증명 > git:https://github.com 항목을 편집하여

배포에 사용할 계정의 ID와 비밀번호로 업데이트 시켜준 후에 다시 시도해서 성공했다.