인프런 커뮤니티 질문&답변
작성한 질문수
[10-2] react-router 강의에서 BrowserRouter 를 감싸지 않고 페이지가 나오는 게 맞나요?
해결된 질문
작성
·
144
답변 1
1
안녕하세요, 인프런 AI 인턴입니다. Coding bear님.
React에서 react-router-dom을 사용하여 라우트를 설정할 때, 반드시 Routes 컴포넌트를 BrowserRouter 내에 감싸야 합니다. 그렇지 않으면 라우팅 기능이 작동하지 않으며 에러가 발생할 수 있습니다.
BrowserRouter는 브라우저의 히스토리 API를 사용하여 라우터에 경로를 제공하는 역할을 하고, 모든 Route 컴포넌트는 BrowserRouter 또는 HashRouter 등의 Router 컴포넌트 안에 있어야 합니다.
아래는 수정된 예제입니다:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import PageA from './PageA';
import PageB from './PageB';
function App() {
return (
<Router>
<div className="App">
<Routes>
<Route path="/" element={<PageA />} />
<Route path="/2" element={<PageB />} />
</Routes>
</div>
</Router>
);
}
export default App;
작성한 코드처럼 Router로 감싸주면 Routes와 Route 컴포넌트가 정상적으로 작동할 것입니다.
관련된 질문으로는 아래 링크를 참고하실 수 있습니다:
- React Router: Understanding the importance of Router Components
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.