useHistory()

[김경원]

강사님 안녕하세요

useHistory() 를 사용하려는데 다음과 같은 에러가 계속 확인되어서 문의드립니다. 

detail 페이지를 제작 중인데 let history = useHistory(); 를 작성하는 순간 에러가 발견되어 디버깅에 실패합니다. 

버전이 이상한줄 알고 Hook을 사용할수 없나 싶어서 구글링을 계속 하는데 useNavigate() 를 사용하라는 말도 있어서 이것저것 만져보았지만 결과는 동일했습니다. 

참고로 제 버전은 다음과 같습니다. 

"react": "^17.0.2",
    "react-bootstrap": "^2.0.0-beta.4",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",

 

[문제 에러] 

Error: 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

 

[App.js] 

/* eslint-disable */
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import { Nav, Navbar, NavDropdown, Container, Button} from 'react-bootstrap'; 
// data.js 에서 데이터를 import 해오기 
import data from './data.js'; 
import { Route, Link, Switch } from 'react-router-dom';
import Detail from './Detail.js'; 

function App() {

  
  let [shoes , shoes변경] = useState(data); 
  return (

    <div className="App">

      {/* Navbar 레이아웃 */}
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="#home">Adadis</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
              <Nav.Link> <Link to ="/">Home</Link></Nav.Link>
              <Nav.Link><Link to ="/detail">Detail</Link></Nav.Link>
              <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      
{/* exact : URL 상에서 겹치는 것들을 안겹치게 해주는 역할 */}
<Route exact path="/">
    {/* 메인페이지 */}
    {/* 웹사이트 대문 */}
    <div className='Jumbotron'>
        <div style = { { paddingTop : '8%' }}>
        <h1> 20% Season Off </h1>
        <p>
          This is a simple hero unit, a simple jumbotron-style component for calling
          extra attention to featured content or information.
        </p>
        <p>
          <Button variant="primary">Learn more</Button>
        </p>
        </div>
      </div>
      <div className='container'>
        <div className = 'row'>
          {/* bootstrap grid layout
          하나의 row는 12col 로 이루어져 있다.  */}
          {
            shoes.map((value, index)=>{
              return <ProductTemplate shoes={shoes} index={index} key = {index}></ProductTemplate>
              // 다 개발해놓고 return 안써서 오류났었음. map 쓸때는 return 반드시 쓸 것
            })
          }
          
        </div> 
        
      </div>
</Route>

<Route path="/detail">
  <Detail/>
</Route>

    </div>
  );
}

function ProductTemplate(props){
  // console.log(props);
  return ( 
    <div className = 'col-sm-4 img-wrap'>
    <img src={'이미지파일/shoes'+ (props.index+1) +'.jpg'}/> 
    <h4> 상품명 : {props.shoes[props.index].title} </h4>
    <p> 상품설명 : {props.shoes[props.index].content } </p> 
    <p> 가격 : {props.shoes[props.index].price} </p> 
  </div>      
  );
}

export default App;

 

[Detail.js]

import React, { useState } from 'react'; 
import { useHistory } from 'react-router-dom'; 

function Detail(){

    let history = useHistory(); 
    // 방문 기록을 저장해 놓는 Object

    return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="이미지파일/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">뒤로가기</button> 
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
</div> 
    );
}

export default Detail; 

 

[index.js]

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[codingapple]

코드 전부 새 프로젝트에 복붙해보니까 별 이상이 없군요

재시작해보거나

node modules 폴더를 지웠다가 npm install 명령어로 재설치해봅시다 

[글쓴이]

글