오늘의 에러
React로 코드를 짜던 중, 오늘은 아래와 같은 에러를 만났다.
언제 봐도 무서운 리액트의 에러 화면 (...)
TypeError: Cannot read properties of undefined (reading 'pathname')
Shell
복사
처음 작성한 코드
처음에는 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;
JavaScript
복사
해결 방법
1. App.js에 다 때려박기
App.js 파일에 BrowserRouter, Route, Routes를 모두 import 한다. 그리고 Route를 Routes로 묶어주고, 이 둘을 모두 BrowserRouter로 묶어준다.
// App.js
import './App.css';
// BrowserRouter를 import
import { BrowserRouter, Route, 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 (
<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;
JavaScript
복사
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';
// Route와 Routes만 import
import { Route, 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";
// 여기서는 딱히 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;
JavaScript
복사
// 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>
);
JavaScript
복사
Today I learned
하아, 분명 라우터 개념에 대해 숙지했다고 생각했는데 아니었다. 당연히 알고 있다고 생각한 부분도 틀리기 마련이다. 이 에러 해결 삽질 노트는 오답 노트라 생각하고, 앞으로는 같은 실수를 하지 않겠다는 다짐을 한다.