Redirect to login page after logout - reactjs

Question

I'm kind of new to React stuff, I've been playing with it for like a week, and I'm stuck at pretty simple thing I think.
After user clicks "logout" I want the function logOut to also redirect him to other page (atm login page, cause its the only other page I've got). However, using navigate, I am having this error about Hooks.
Line 13:21: React Hook "useNavigate" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function
I've tried to workaround this however I don't think I fully understand whats the matter here. If anyone could simply point to me, what should I re-write to get my code going, I would be grateful.
My App.js:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import './App.css';
import RegistrationForm from './registry/Register';
import LoginForm from './registry/Login';
import WelcomeBack from './pages/Main';
import { useNavigate } from 'react-router-dom';
class App extends Component {
}
render() {
const nav = useNavigate();
function logOut() {
localStorage.removeItem("jwt");
nav("/login");
}
function isLoggedIn() {
const tokenValue = localStorage.getItem("jwt");
if (tokenValue != null) {
return true;
}
//here navigate to '/login'
return false;
}
return (
<Router>
<div>
<div class="topnav" id="myTopnav">
Home
About
Register
Login
<div className="logout" >
<a href="#" class="split" onClick={logOut}>Logout</a>
</div>
<a href="javascript:void(0);" class="icon" onClick={myFunction}>
<i class="fa fa-bars"></i>
</a>
</div>
<Routes>
<Route path='/register' element={<RegistrationForm />}/>
<Route path='/login' element={<LoginForm />} />
<Route path='/' element={<WelcomeBack />} />
</Routes>
</div>
</Router>
);
}
}
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
}
else {
x.className = "topnav";
}
}
export default App;

Answer 1

Hooks are not working in the class component, if u want to use you can wrap it in a HOC.
function withNavigation(Component) {
return props => <Component {...props} navigate={useNavigate()} />;
}
and then
class BlogPost extends React.Component {
redirect(){
this.props.navigate('/url')
}
render() {
// ...
}
}
export default withNavigation(BlogPost);
check this issue for more information Github Issue

Answer 2

first thing you can't use react hooks ( useNavigate ) inside class component, instead you can use withRouter in class component.
https://v5.reactrouter.com/web/api/withRouter
second thing, you forgot to put the code between the curly braces
you should do it like this:
class App extends Component {
...
// put your code here between the curly braces
}