Route, Routes를 BrowserRouter로 감싸주지 않으면..

🤔  오늘의 에러

React로 코드를 짜던 중, 오늘은 아래와 같은 에러를 만났다.

언제 봐도 무서운 리액트의 에러 화면 (...)

TypeError: Cannot read properties of undefined (reading 'pathname')

 

해당 에러에 대한 GPT의 답은 아래와 같았다.

이 에러는 React 애플리케이션에서 'pathname' 속성을 갖는 객체를 참조하려고 할 때 해당 객체가 정의되지 않은 경우 발생합니다. 'pathname'은 일반적으로 브라우저의 URL 경로를 나타내는 속성입니다. 일반적으로 이 에러는 다음과 같은 상황에서 발생할 수 있습니다:

1. 브라우저 라우터 오류: React Router 또는 다른 라우팅 라이브러리를 사용하는 경우, 브라우저 라우터가 초기화되지 않았거나 잘못 구성되어 'pathname' 속성이 정의되지 않을 수 있습니다. 이 경우, 라우터 설정을 확인하고 초기화되었는지, 정확한 경로 및 라우트 구성을 사용하는지 확인해야 합니다.

2. 컴포넌트 생명주기 문제: React 컴포넌트의 생명주기 메서드나 특정 이벤트 핸들러에서 'pathname' 속성을 사용하고 있을 때, 해당 속성이 아직 정의되지 않았을 수 있습니다. 이 경우, 컴포넌트가 마운트 되기 전에 또는 해당 속성이 예상대로 설정되지 않았을 때 해당 코드를 수정해야 합니다.

3. 비동기 데이터 로딩 문제: 비동기 작업(예: 데이터 가져오기)을 수행하는 동안 'pathname' 속성을 참조하고자 할 때, 해당 작업이 아직 완료되지 않아 'pathname'이 정의되지 않을 수 있습니다. 이 경우, 데이터 로딩이 완료된 후에 해당 속성을 참조하도록 코드를 수정해야 합니다.

 

 

🧐 처음 작성한 코드

처음에는 Routes와 Route들을 'Router'로 묶어 주었다. 이 부분이 원인이었다. 

// App.js

import './App.css';
import { Route, Router, Routes } from "react-router-dom"; // *여기를 수정해야 함

import BookmarkPage from "../src/pages/Bookmark-page";
import Footer from "../src/components/Footer";
import Header from "../src/components/Header";
import MainPage from "../src/pages/Main-page";
import ProductListPage from "../src/pages/ProductList-page";
import React from "react";

function App() {
  return (
    <Router> {/* 여기를 수정해야 함 */}
    <div>
      <Header/>
        <Routes>
          <Route path="/" element={<MainPage/>}/>
          <Route path="/products" element={<BookmarkPage/>}/>
          <Route path="/bookmark" element={<ProductListPage/>}/>
        </Routes>
      <Footer/>
    </div>
    </Router>
  );
}

export default App;

 

 

💡 해결 방법

1. App.js에 다 때려박기

App.js 파일에 BrowserRouter, Route, Routes를 모두 import 한다. 그리고 Route를 Routes로 묶어주고, 이 둘을 모두 BrowserRouter로 묶어준다.

// App.js

import './App.css';
import { BrowserRouter, Route, Routes } from "react-router-dom"; // *BrowserRouter를 import

import BookmarkPage from "../src/pages/Bookmark-page";
import Footer from "../src/components/Footer";
import Header from "../src/components/Header";
import MainPage from "../src/pages/Main-page";
import ProductListPage from "../src/pages/ProductList-page";
import React from "react";

function App() {
  return (
    <BrowserRouter>
    <div>
      <Header/>
        <Routes>
          <Route path="/" element={<MainPage/>}/>
          <Route path="/products" element={<BookmarkPage/>}/>
          <Route path="/bookmark" element={<ProductListPage/>}/>
        </Routes>
      <Footer/>
    </div>
    </BrowserRouter>
  );
}

export default App;

 

2. index.js에 App.js를 import 하기

또는 App.js에는 Route와 Routes만 import 해주는 방법도 있다. 이때, BrowserRouter는 index.js에 import 및 jsx에서 사용, App 컴포넌트 또한 index.js에 import 및 jsx에서 사용해 준다.

// App.js

import './App.css';
import { Route, Routes } from "react-router-dom"; // *Route와 Routes만 import

import BookmarkPage from "../src/pages/Bookmark-page";
import Footer from "../src/components/Footer";
import Header from "../src/components/Header";
import MainPage from "../src/pages/Main-page";
import ProductListPage from "../src/pages/ProductList-page";
import React from "react";

// 여기서는 딱히 BrowserRouter를 쓰지 않음
function App() {
  return (
    <div>
      <Header/>
        <Routes>
          <Route path="/" element={<MainPage/>}/>
          <Route path="/products" element={<BookmarkPage/>}/>
          <Route path="/bookmark" element={<ProductListPage/>}/>
        </Routes>
      <Footer/>
    </div>
  );
}

export default App;

// index.js

import './index.css';
import App from './App'; // *App.js를 import
import { BrowserRouter } from 'react-router-dom'; // *BrowserRouter import
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App /> {/* import한 App 컴포넌트를 jsx에서 사용 */}
      </BrowserRouter>
  </React.StrictMode>
);

 

 

😅 Today I learned

하아, 분명 라우터 개념에 대해 숙지했다고 생각했는데 아니었다. 당연히 알고 있다고 생각한 부분도 틀리기 마련이다. 이 에러 해결 삽질 노트는 오답 노트라 생각하고, 앞으로는 같은 실수를 하지 않겠다는 다짐을 한다.