React Router 2 : Link, Switch, history 기능 useHistory 에러

[Arete]

Detail.js

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

function Detail(){
 
  let history = useHistory();
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          
        </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 onClick={()=>{ history.goBack() }} className="btn btn-danger">뒤로가기</button>
        </div>
      </div>
  </div>  
  )
};

export default Detail

여기서 Invalid hook call. Hooks can only be called inside of the body of a function component. 에러가 뜹니다

let histroy = useHistory(); <- 이 부분을 지우면 정상 작동

다른 라우팅 관련 코드들에는 문제가 없어 보이는데 어떡해 해결해야 할까요?

버전 :

( 

"react": "^17.0.2",
    "react-bootstrap": "^2.2.2",
    "react-dom": "^17.0.2",

)

 

<strong>App.js</strong>

import React, { useState } from 'react';
import {Link, Route, Switch} from 'react-router-dom';
import {Navbar, Container, Button, Nav, NavDropdown} from 'react-bootstrap';
import Detail from './Detail';
import ProductItem from './ProductItem';
import './App.css';

function App() {
  let [shoes, setShoes] = useState(ProductItem);

  return (
    <div className="App">
        <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand href="#home">ShoeShop</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>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      <Route exact path="/">
        <div className='jumbotron'>
          <h1>20% Seson Off</h1>
          <p>
              This is simple hero unit
          </p>
          <p>
            <Button variant="primary">Learn more</Button>
          </p>
        </div>
        <div className='container'>
        <div className='row'>
          {shoes.map((v, i) => {
          return(
            <Product value={v} key={i}/>
          )
          })}
        </div>
      </div>
      </Route>
      <Route path="/detail">  
          <Detail />
      </Route>
    </div>
  );
}

function Product(props)
{
  return(
    <div className='col-md-4'>
     
      <h4>{props.value.title}</h4>
      <p>{props.value.content} & {props.value.price}원</p>
    </div>
  )
}

export default App;

 

<strong>Index.js</strong>

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]

package.json 파일에 react-router-dom 항목이 없는거보니 패키지 설치가 이상한 곳에 되었거나 그런게 아닐까요 

[Arete]

오마이갓~ 그렇네요 패키지를 상위폴더에 깔아버렸었네요 감사합니다

[글쓴이]

글