BrowserRouter사용방법
강의 12.3 보다가 의문이 들어서 질문 남깁니다.
강의에서 설명하고 사용하셨던 방법과 공식문서에서 BrowserRouter를 사용하는 방법이 달라서 헷갈립니다.
두가지 방법이 같은 것인지, 다르다면 어떻게 다른지 알려주세요
function App() {
return (
<BrowserRouter basename="/app">
<Routes>
<Route path="/" />
</Routes>
</BrowserRouter> );
}
=>공식문서에서는 이렇게 Routes를 BrowserRouter로 감싸서 사용했는데 강의 에서는 그러지 않아서 궁금합니다.!
답변 2
0
안녕하세요 이정환입니다.
우리 강의에서는 main.js에 이미 BrowserRouter로 App 컴포넌트를 감싸두었기 때문에 그렇습니다 😃
Routes 컴포넌트들만 감싸고 있으면 되기 때문에 문제 없습니다.
0
안녕하세요, 인프런 AI 인턴입니다. ggang89님, 질문 주셔서 감사합니다.
강의에서 보신 것과 공식 문서에서 소개된 방법이 달라 보여 혼란스러울 수 있습니다. 두 가지 방법의 차이에 대해 간단히 설명드리겠습니다.
BrowserRouter와 Routes의 관계
공식 문서 방식
- 일반적으로 공식 문서에서는
BrowserRouter컴포넌트가Routes컴포넌트를 감싸는 형태로 사용됩니다.
- 이 구조는
<BrowserRouter>내에서 여러 개의<Route>를 정의하여, 전체 어플리케이션의 라우팅을 관리하는 방식입니다.
- 일반적으로 공식 문서에서는
강의에서의 방식
- 강의에서
BrowserRouter없이Routes를 사용하는 경우도 있지만, 이는 특정 상황에서 구조적 차이가 발생할 수 있기 때문에 오류가 발생하기 쉬운 접근 방식입니다.
Routes내의 모든<Route>는BrowserRouter또는MemoryRouter,HashRouter등과 같은 Router 컴포넌트로 감싸져야 작동합니다.
- 강의에서
이 두 가지 방법은 서브 컴포넌트에 대한 라우팅 구조를 어떻게 구성하느냐에 따라 일부 차이가 있을 수 있지만, 겉보기에는 큰 차이가 없어 보일 수 있습니다. 실무에서는 대개 공식 문서의 방식을 따르는 것이 좋습니다. 강의에서 생략한 부분이 있다면, 목적에 맞게 BrowserRouter로 감싸서 사용하는 것을 추천드립니다.
이 주제와 관련하여 도움이 될 수 있는 유사한 질문과 답변이 있어 소개해드리겠습니다:
- 링크와 라우트 차이점: 이 질문에서
Link와Route의 차이를 설명하며, 중괄호 사용 여부와 관련된 일반적인 질문에 대한 답변을 확인하실 수 있습니다.
강의와 코드베이스에 따라 구현 방법이 약간 달라질 수 있으니, 전체적인 라우팅 구조를 잘 이해하고 응용하는 것이 중요합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
27
2
프론트엔드 학습 수준 문의
0
39
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
48
2
데이터 로딩중 화면만 계속 나와요!!
0
55
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
108
2
onMouseEnter 관련 문의 드립니다
0
92
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
113
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
136
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
69
1
vs code 자동완성관련 문의
0
113
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
179
2
87강 필터 함수 질문
0
69
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2





