React:: HashRouter, Route 적용 후 빈 페이지 로딩 오류 해결

리액트로 영화 평점 웹서비스를 구현 중 라우터 적용에 오류가 발생하였다.

 

코드:

import React from 'react';
import './App.css';
import { HashRouter, Route } from 'react-router-dom';
import About from './routes/About';
import Home from './routes/Home';

function App(){
  return (
    <HashRouter>
      <Route path="/" component={Home} />
      <Route path="/about" element={About} />
    </HashRouter>
  )
}

export default App;

 

 

 

1. 문제 확인

오류:

1. HashRouter를 사용하면 주소가 http://localhost:3000/#/로 바뀌어야 하는데 바뀌지 않았다.

2. url를 입력하여도 빈 페이지가 로딩되고 개발자 도구에서 에러 메세지가 발생한다.

 

오류메세지:

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
    at invariant (index.tsx:24:1)
    at Route (index.tsx:235:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)

 

 

 

2. 해결방법

react-router-dom 라이브러리가 버전 업데이트 되면서 발생한 오류라고 한다.

해결방법엔 두 가지가 있는데

1) 최신 버전에 맞게 작성한다.

2) 이전 버전을 설치한다.

 

1)번을 실행해보았는데 해결되지 않아 2)번으로 해결해보았다.

 

 

 

3. 오류 해결

package.json 파일을 확인해준다.

visual studio code를 사용하는 경우 단축키 ctrl+shift+f로 react-router-dom을 검색한다.

오류를 해결한 뒤라 "react-router-dom": "^5.3.0"으로 되어있지만 원래는 6버전이었다.

이것을 5.3.0버전으로 바꿔줘야 한다.

 

터미널이나 powerShell에서 아래 명령어를 입력해준다.

npm install react-router-dom@5.3.0

설치가 완료되고 버전을 확인하면 다운그레이드가 잘 되어있다.

그리고 다시 프로젝트를 구동해본다.

 

오류가 해결되어 페이지 로딩이 잘 되는 것을 확인할 수 있다.

 

주소도 #이 붙어서 잘 나온다.

 

 

 

 

 

참조:

https://gallery-k.tistory.com/256

[React] react-router-dom 설치 후 Route 시 오류 해결