"Cannot read properties of undefined (reading 'pathname')" 에러

리액트 파일을 구성하다가 Router을 쓰기 위해 import 했는데, 갑자기 아래와 같은 에러가 출몰했다.

"Cannot read properties of undefined (reading 'pathname')"

강의 영상에 나온 대로 Router을 쓰려다가 발생한 에러였는데 검색을 해본 결과 제시된 가설은 다음과 같았다.

 

1) Router 6 버전이 에러가 많아서 그렇다, 다운그레이드 해라

2) Link 에 to를 쓰지 않아 발생한 에러다

 

일단은 1번을 따라서 버전 6을 삭제하고 5버전으로 깔아주었다. json파일 내부에서

"react-router-dom": "^5.3.0",

이렇게 버전을 낮춰두고 npm i 하기만 해줘도 수정은 된다. 직접 삭제하고 다시 까는 법도 있다.

 

 

그러나 이 방법으로는 해결되지 못했고, Link는 아직 쓰지도 않은 터라 여기서 에러가 났을 리도 없었다...

이때 작성했던 코드는 다음과 같다.

import React from 'react'
import Home from "../routes/Home"
import Detail from "../routes/Detail"
import { Route, Router } from 'react-router-dom'

function App() {
  return (
    <Router>
        <Route path="/" exact component = {Home}></Route>
        <Route path="/:id" component = {Detail}></Route>
    </Router>
  )
}

export default App

하여튼 다른 건 문제가 없으니 Router 문제였는데...

고민하면서 Routes 등으로 바꿔 써보던 중에 react-router-dom 내부에 BrowserRouter가 있다는 것을 알게 되었다. Router이 아니라. 그러고보니까 이전에도 BrowserRouter을 썼었지. 

긴가민가 하면서 BrowserRouter로 바꿔주니까 멀쩡하게 돌아갔다.(하!) 

import React from 'react'
import Home from "../routes/Home"
import Detail from "../routes/Detail"
import { Route, BrowserRouter } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
        <Route path="/" exact component = {Home}></Route>
        <Route path="/:id" component = {Detail}></Route>
    </BrowserRouter>
  )
}

export default App

아마 강의 내에서 HashRouter as Router 을 쓰길래, 내게 썩 익숙치 않은 HashRouter을 빼버리고 Router만 쓰다 보니 너 지금 이상한 걸 가져와서 쓰고 있다고 표시하며 발생한 에러가 아닌가 싶다.

어쨌거나 위의 두 가지 방법이 안 먹힌다면, import 를 제대로 하고 있는지 볼 것. 엉뚱한 걸 import 하고 있을지도?

 

그래도 이번 기회에 HashRouter도 공부하게 되어 좋았다. (동적x 정적 페이지를 만들 때 주로 쓴다고) 아래처럼 HashRouter로 감싸주면 주소창에 #이 하나 생기는데, 이렇게 생성되면 검색엔진으로는 읽히지 않는다고 한다. 

import React from 'react'
import Home from "../routes/Home"
import Detail from "../routes/Detail"
import { Route, HashRouter} from 'react-router-dom'

function App() {
  return (
    <HashRouter>
        <Route path="/" exact component = {Home}></Route>
        <Route path="/:id" component = {Detail}></Route>
    </HashRouter>
  )
}

export default App