인프런 커뮤니티 질문&답변

이유경님의 프로필 이미지
이유경

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.5) 페이지 라우팅 4. 동적 경로

<BrowserRouter> 없이 Link to를 쓰면 에러가 납니다.

해결된 질문

작성

·

264

·

수정됨

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

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

보내주신 오류는 BrowserRouter로 감싸지지 않은 자식 컴포넌트에서 React Router의 기능을 사용하려고 하면 발생하는 오류입니다. 강의에서는 main.jsx 파일에 BrowserRouter 로 App 컴포넌트를 감싸도록 작성했는데요 혹시 이 부분을 놓치신 게 아닌가 싶습니다. 체크 부탁드립니다 😃

이유경님의 프로필 이미지
이유경

작성한 질문수

질문하기