작성한 질문수 18

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

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

0

루트의 index.js에서 <App /> 컴포넌트를
<BrowserRouter> 로 감싸주고 있어서 생략된게 아닌가 싶구요.

AI 자동답변은 링크오 404고 도움이 안되네요