부트스트랩이 적용이 안됩니다

[김혜수]

×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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

 

부트스트랩이 적용이 안되는데 어디를 봐야 할까요 ㅠㅠ ..

index.html파일에 부트스트랩 4버전 css 다운받아서 head에 link해도 안됩니다

 

 

[codingapple]

저거 에러난 페이지의 코드를 복붙해주시면 됩니다

부트스트랩말고 useState() 이런거 Hook의 위치가 이상하다는 에러같은데요 

App.js 위에 import 부트스트랩 어쩌구를 잘 했는지 확인하고  

function 안에서 useState()를 썼는지 일단 확인합시다 

[김혜수]

코드 입니다 

import React from 'react';
import { Navbar,Nav,NavDropdown,Button,Jumbotron } from 'react-bootstrap';
import './App.css';

function App() {
return (
<div className="App">
<Navbar bg="light" expand="lg" className="">
<Navbar.Brand href="#home">Shoes shop</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">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>
</Navbar>
<Jumbotron>
<h1>Hello, world!</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>
</Jumbotron>
</div>
);
}

export default App;

 

[김혜수]

코드 입니다 

 

import React from 'react';
import { Navbar,Nav,NavDropdown } from 'react-bootstrap';
import './App.css';

function App() {
return (
<div className="App">
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">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>
</Navbar>
 
</div>
);
}

export default App;

 

 

[codingapple]

App.js 파일 전체 코드가 저거라면 별로 이상한 곳이 없는데요 

에러메세지를 다시 확인해봅시다 혹시 App.js 말고 다른 js 파일에서 에러가 나나요? 

[김혜수]

리액트 재설치하고 해결 했습니다. 

제가 오히려 해결한다고 다른 코드들을 수정한게 문제였나 봅니다

[글쓴이]

글