• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 router 세팅 오류

router 세팅 오류

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #66444

    박혜린
    참가자
    안녕하세요
    제가 강사님 Part2의 강의를 들으며 router 세팅을 했을 때는 오류가 없었는데 이번에 새로운 폴더를 생성하여 react-router-dom@6 을 설치후
    index.js 에서 BroswerRouter로 <App /> 을 감싸는 순간 화면에 아무것도 안 뜨는 오류가 발생하여 질문을 남깁니다.
    
    안 감쌌을 때
    
    감쌌을 때
    
    #66445

    박혜린
    참가자
    감싸는 순간
    
    
    react.development.js:209 
            
           Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    printWarning @ react.development.js:209
    error @ react.development.js:183
    resolveDispatcher @ react.development.js:1592
    useRef @ react.development.js:1629
    BrowserRouter @ index.tsx:292
    renderWithHooks @ react-dom.development.js:16305
    mountIndeterminateComponent @ react-dom.development.js:20074
    beginWork @ react-dom.development.js:21587
    beginWork$1 @ react-dom.development.js:27426
    performUnitOfWork @ react-dom.development.js:26557
    workLoopSync @ react-dom.development.js:26466
    renderRootSync @ react-dom.development.js:26434
    performConcurrentWorkOnRoot @ react-dom.development.js:25738
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
    react.development.js:209 
            
           Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    printWarning @ react.development.js:209
    error @ react.development.js:183
    resolveDispatcher @ react.development.js:1592
    useRef @ react.development.js:1629
    BrowserRouter @ index.tsx:292
    renderWithHooks @ react-dom.development.js:16305
    mountIndeterminateComponent @ react-dom.development.js:20074
    beginWork @ react-dom.development.js:21587
    callCallback @ react-dom.development.js:4164
    invokeGuardedCallbackDev @ react-dom.development.js:4213
    invokeGuardedCallback @ react-dom.development.js:4277
    beginWork$1 @ react-dom.development.js:27451
    performUnitOfWork @ react-dom.development.js:26557
    workLoopSync @ react-dom.development.js:26466
    renderRootSync @ react-dom.development.js:26434
    performConcurrentWorkOnRoot @ react-dom.development.js:25738
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
    react.development.js:1630 
            
           Uncaught TypeError: Cannot read properties of null (reading 'useRef')
        at Object.useRef (react.development.js:1630:1)
        at BrowserRouter (index.tsx:292:1)
        at renderWithHooks (react-dom.development.js:16305:1)
        at mountIndeterminateComponent (react-dom.development.js:20074:1)
        at beginWork (react-dom.development.js:21587:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
        at invokeGuardedCallback (react-dom.development.js:4277:1)
        at beginWork$1 (react-dom.development.js:27451:1)
        at performUnitOfWork (react-dom.development.js:26557:1)
    useRef @ react.development.js:1630
    BrowserRouter @ index.tsx:292
    renderWithHooks @ react-dom.development.js:16305
    mountIndeterminateComponent @ react-dom.development.js:20074
    beginWork @ react-dom.development.js:21587
    callCallback @ react-dom.development.js:4164
    invokeGuardedCallbackDev @ react-dom.development.js:4213
    invokeGuardedCallback @ react-dom.development.js:4277
    beginWork$1 @ react-dom.development.js:27451
    performUnitOfWork @ react-dom.development.js:26557
    workLoopSync @ react-dom.development.js:26466
    renderRootSync @ react-dom.development.js:26434
    performConcurrentWorkOnRoot @ react-dom.development.js:25738
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
    react.development.js:209 
            
           Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    printWarning @ react.development.js:209
    error @ react.development.js:183
    resolveDispatcher @ react.development.js:1592
    useRef @ react.development.js:1629
    BrowserRouter @ index.tsx:292
    renderWithHooks @ react-dom.development.js:16305
    mountIndeterminateComponent @ react-dom.development.js:20074
    beginWork @ react-dom.development.js:21587
    beginWork$1 @ react-dom.development.js:27426
    performUnitOfWork @ react-dom.development.js:26557
    workLoopSync @ react-dom.development.js:26466
    renderRootSync @ react-dom.development.js:26434
    recoverFromConcurrentError @ react-dom.development.js:25850
    performConcurrentWorkOnRoot @ react-dom.development.js:25750
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
    react.development.js:209 
            
           Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    printWarning @ react.development.js:209
    error @ react.development.js:183
    resolveDispatcher @ react.development.js:1592
    useRef @ react.development.js:1629
    BrowserRouter @ index.tsx:292
    renderWithHooks @ react-dom.development.js:16305
    mountIndeterminateComponent @ react-dom.development.js:20074
    beginWork @ react-dom.development.js:21587
    callCallback @ react-dom.development.js:4164
    invokeGuardedCallbackDev @ react-dom.development.js:4213
    invokeGuardedCallback @ react-dom.development.js:4277
    beginWork$1 @ react-dom.development.js:27451
    performUnitOfWork @ react-dom.development.js:26557
    workLoopSync @ react-dom.development.js:26466
    renderRootSync @ react-dom.development.js:26434
    recoverFromConcurrentError @ react-dom.development.js:25850
    performConcurrentWorkOnRoot @ react-dom.development.js:25750
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
    react.development.js:1630 
            
           Uncaught TypeError: Cannot read properties of null (reading 'useRef')
        at Object.useRef (react.development.js:1630:1)
        at BrowserRouter (index.tsx:292:1)
        at renderWithHooks (react-dom.development.js:16305:1)
        at mountIndeterminateComponent (react-dom.development.js:20074:1)
        at beginWork (react-dom.development.js:21587:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
        at invokeGuardedCallback (react-dom.development.js:4277:1)
        at beginWork$1 (react-dom.development.js:27451:1)
        at performUnitOfWork (react-dom.development.js:26557:1)
    useRef @ react.development.js:1630
    BrowserRouter @ index.tsx:292
    renderWithHooks @ react-dom.development.js:16305
    mountIndeterminateComponent @ react-dom.development.js:20074
    beginWork @ react-dom.development.js:21587
    callCallback @ react-dom.development.js:4164
    invokeGuardedCallbackDev @ react-dom.development.js:4213
    invokeGuardedCallback @ react-dom.development.js:4277
    beginWork$1 @ react-dom.development.js:27451
    performUnitOfWork @ react-dom.development.js:26557
    workLoopSync @ react-dom.development.js:26466
    renderRootSync @ react-dom.development.js:26434
    recoverFromConcurrentError @ react-dom.development.js:25850
    performConcurrentWorkOnRoot @ react-dom.development.js:25750
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
    react-dom.development.js:18687 
            
           The above error occurred in the <BrowserRouter> component:
        at BrowserRouter (http://localhost:3001/static/js/bundle.js:43577:5)
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
    logCapturedError @ react-dom.development.js:18687
    update.callback @ react-dom.development.js:18720
    callCallback @ react-dom.development.js:13923
    commitUpdateQueue @ react-dom.development.js:13944
    commitLayoutEffectOnFiber @ react-dom.development.js:23391
    commitLayoutMountEffects_complete @ react-dom.development.js:24688
    commitLayoutEffects_begin @ react-dom.development.js:24674
    commitLayoutEffects @ react-dom.development.js:24612
    commitRootImpl @ react-dom.development.js:26823
    commitRoot @ react-dom.development.js:26682
    finishConcurrentRender @ react-dom.development.js:25892
    performConcurrentWorkOnRoot @ react-dom.development.js:25809
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
    react.development.js:1630 
            
           Uncaught TypeError: Cannot read properties of null (reading 'useRef')
        at Object.useRef (react.development.js:1630:1)
        at BrowserRouter (index.tsx:292:1)
        at renderWithHooks (react-dom.development.js:16305:1)
        at mountIndeterminateComponent (react-dom.development.js:20074:1)
        at beginWork (react-dom.development.js:21587:1)
        at beginWork$1 (react-dom.development.js:27426:1)
        at performUnitOfWork (react-dom.development.js:26557:1)
        at workLoopSync (react-dom.development.js:26466:1)
        at renderRootSync (react-dom.development.js:26434:1)
        at recoverFromConcurrentError (react-dom.development.js:25850:1)
    useRef @ react.development.js:1630
    BrowserRouter @ index.tsx:292
    renderWithHooks @ react-dom.development.js:16305
    mountIndeterminateComponent @ react-dom.development.js:20074
    beginWork @ react-dom.development.js:21587
    beginWork$1 @ react-dom.development.js:27426
    performUnitOfWork @ react-dom.development.js:26557
    workLoopSync @ react-dom.development.js:26466
    renderRootSync @ react-dom.development.js:26434
    recoverFromConcurrentError @ react-dom.development.js:25850
    performConcurrentWorkOnRoot @ react-dom.development.js:25750
    workLoop @ scheduler.development.js:266
    flushWork @ scheduler.development.js:239
    performWorkUntilDeadline @ scheduler.development.js:533
    
    
    이같은 오류가 뜹니다
    #66460

    codingapple
    키 마스터
    라이브러리 설치가 잘 안되면 가끔그렇습니다 새 프로젝트만들어서 설치해서 테스트해봅시다
3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠