해결된 질문
24.03.30 20:34 작성
·
231
·
수정됨
0
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요
- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)
- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)
- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요
- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)
- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)
- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)
- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요
- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요 강의 정말 감사히 잘듣고 있습니다!
라우트 관련해 질문이 있습니다.
영상처럼 작성했을 때 에러가 납니다. 에러내용
Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null. TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null. at LinkWithRef (http://localhost:3000/static/js/bundle.js:38549:5) at renderWithHooks (http://localhost:3000/static/js/bundle.js:25406:22) at updateForwardRef (http://localhost:3000/static/js/bundle.js:27975:24) at beginWork (http://localhost:3000/static/js/bundle.js:30022:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:15002:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:15046:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:15103:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:34967:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:34215:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:34138:9)
전 강의 코드를 따라했을 땐 문제가 없습니다. 영상에 캡쳐된 코드 방식대로 하려면 어떻게 해야 하나요?
return (
<div className="App">
<DiaryStateContext.Provider value={data}>
<DiaryDispatchContext.Provider
value={{
onCreate,
onUpdate,
onDelete,
}}
>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/edit/:id" element={<Edit />} />
<Route path="/diary/:id" element={<Diary />} />
</Routes>
<RouterTest />
<div />
</BrowserRouter>
</DiaryDispatchContext.Provider>
</DiaryStateContext.Provider>
</div>
);
+
<RouterTest> 컴포넌트 안에는 Link to 들이 적혀 있습니다.
감사합니다.
답변 1
0
2024. 04. 01. 16:47
안녕하세요 이정환입니다.
보내주신 오류는 BrowserRouter로 감싸지지 않은 자식 컴포넌트에서 React Router의 기능을 사용하려고 하면 발생하는 오류입니다. 강의에서는 main.jsx 파일에 BrowserRouter 로 App 컴포넌트를 감싸도록 작성했는데요 혹시 이 부분을 놓치신 게 아닌가 싶습니다. 체크 부탁드립니다 😃