usehistory() invalid hook call 오류입니다.

import axios from "axios";
import { useHistory } from "react-router-dom";
function Logging(){
const username = document.getElementById("username");
const password = document.getElementById('password');
 
let history = useHistory();
//history.push('/Translation');
axios({
method:"POST",
url: '~~~~~~~~~~',
data:{
"username": username?.value,
"password": password?.value
}
}).then((res)=>{//성공
console.log(res);
console.log(res.data.refresh_token);
localStorage.setItem("re-token",res.data.refresh_token);
localStorage.setItem("ac-token",res.data.access_token);
window.alert(JSON.stringify(res.data.username).replace(/\"/gi, "")+"님 접속 성공");
 
}).catch(error=>{
console.log(error);
window.alert("접속실패.");
});
}
export default Logging;

이런식으로하고있는데

let history = useHistory(); 이것만 적으면 invalid hook call 오류가 생기더라고요,,왜이럴까요..?

// eslint-disable
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Link,Route,Switch} from 'react-router-dom';
import React ,{useState}from 'react';
import Translation from './Translation.js';
import Login from './Login.js';
import Main from './Main.js';
import Sg from './Sg';
import { BrowserRouter } from 'react-router-dom';

function App() {
return (
<div>
<BrowserRouter>
<Route exact path='/' >
<Main/>
</Route>
<Route exact path='/sg' >
<Sg/>
</Route>
<Route exact path='/Login' >
<Login/>
</Route>
<Route exact path='/Translation' >
<Translation/>
</Route>
</BrowserRouter>
</div>
);
}

export default App;