React useTranslation alternative in Class Component - reactjs

Question

I am a total beginner in React (as I am in StackOverflow, sorry if the form of my post isn't quite right)
I have this SPA app that translates my content from french to english and back, works perfectly fine, but I would like to add an "active" className to my language toggle buttons so I can underline the active language in css, and what I found I had to do was dealing with the state of the component. Now I use a function component with useTranslation, and if I try and convert my function component to a class component, it says useTranslation can't be used in a class component.
Could any of you help me re-write my component so I can make it a class component and use a constructor and deal with the states, but still use the same hooks and functions I'm using now for translation?
I found previous aswers using withTranslation wrapper, but no example that would take my toggle buttons and changeLanguage function for navigation into account, just for {t} plain strings, so I'im a bit lost on how to write this correctly...
Here is my app code as a function component:
import React, { Component } from "react";
import {
Route,
NavLink,
HashRouter
} from "react-router-dom";
import Home from "./Home";
import Projets from "./Projets";
import Contact from "./Contact";
import Design from "./Design";
import Web from "./Web";
import ReactDOM from "react-dom";
import { useTranslation, Trans } from "react-i18next";
export default function App() {
const { t, i18n } = useTranslation();
const changeLanguage = lng => {
i18n.changeLanguage(lng);
};
return (
<div className="App">
<div className="App-header">
<h1>{t("Bienvenue sur notre Blog")}</h1>
</div>
<HashRouter>
<div className="main-container">
<div className="navigation">
<ul className="nav-list">
<li className="nav-links"><NavLink exact to="/"><Trans>Accueil</Trans></NavLink></li>
<li className="nav-links"><NavLink to="/projets"><Trans>Projets</Trans></NavLink></li>
<ul className="nav-sublist">
<li className="nav-sublinks"><NavLink to="/projets/graphisme-maquettes"><Trans>Graphisme</Trans></NavLink></li>
<li className="nav-sublinks"><NavLink to="/projets/web"><Trans>Web</Trans></NavLink></li>
</ul>
<li className="nav-links"><NavLink to="/contact"><Trans>Contact</Trans></NavLink></li>
</ul>
<div class='langSelect'>
<button onClick={() => changeLanguage("fr")} class='langBtn' value='lang'>fr</button>
<button onClick={() => changeLanguage("en")} class='langBtn' value='lang'>en</button>
</div>
</div>
<div className="content">
<Route exact path="/" component={Home}/>
<Route path="/projets" component={Projets}/>
<Route path="/projets/graphisme-maquettes" component={Design}/>
<Route path="/projets/web" component={Web}/>
<Route path="/contact" component={Contact}/>
</div>
</div>
</HashRouter>
</div>
);
}
And here is my i18n.js file:
import i18n from "i18next";
// import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
i18n
// .use(LanguageDetector)
.use(initReactI18next)
.use(LanguageDetector)
.init({
// we init with resources
resources: {
en: {
translations: {
Accueil:"Home",
Projets:"Work",
Graphisme:"Design",
Web: "Web",
Contact:"Contact",
// "Projets":"Work",
"Bienvenue sur notre Blog":"Welcome to our Blog"
}
},
fr: {
translations: {
Accueil:"Accueil",
Projets:"Projets",
Graphisme:"Graphisme",
Web: "Web",
Contact:"Contact",
// "Projets":"Projets",
"Bienvenue sur notre Blog":"Bienvenue sur notre Blog"
}
}
},
fallbackLng: "fr",
debug: true,
// have a common namespace used around the full app
ns: ["translations"],
defaultNS: "translations",
keySeparator: false, // we use content as keys
interpolation: {
escapeValue: false
}
});
export default i18n;
Now, what I would like to achieve is something like this:
import React, { Component } from "react";
import {
Route,
NavLink,
HashRouter
} from "react-router-dom";
import Home from "./Home";
import Projets from "./Projets";
import Contact from "./Contact";
import Design from "./Design";
import Web from "./Web";
import ReactDOM from "react-dom";
import { useTranslation, Trans } from "react-i18next";
class App extends Component {
constructor(){
super();
this.state = {
underline: false
}
}
render {
const { t, i18n } = useTranslation(); => OBVIOULSY USE SOMETHING ELSE
const changeLanguage = lng => {
i18n.changeLanguage(lng);
}; => ADD/REMOVE THE CLASSNAME HERE AT THE SAME TIME I CHANGE LANGUAGE?
return (
<div className="App">
<div className="App-header">
<h1>{t("Bienvenue sur notre Blog")}</h1>
</div>
<HashRouter>
<div className="main-container">
<div className="navigation">
<ul className="nav-list">
<li className="nav-links"><NavLink exact to="/"><Trans>Accueil</Trans></NavLink></li>
<li className="nav-links"><NavLink to="/projets"><Trans>Projets</Trans></NavLink></li>
<ul className="nav-sublist">
<li className="nav-sublinks"><NavLink to="/projets/graphisme-maquettes"><Trans>Graphisme</Trans></NavLink></li>
<li className="nav-sublinks"><NavLink to="/projets/web"><Trans>Web</Trans></NavLink></li>
</ul>
<li className="nav-links"><NavLink to="/contact"><Trans>Contact</Trans></NavLink></li>
</ul>
<div class='langSelect'>
<button onClick={() => changeLanguage("fr")} class='langBtn' value='lang'>fr</button>
<button onClick={() => changeLanguage("en")} class='langBtn' value='lang'>en</button>
</div>
</div>
<div className="content">
<Route exact path="/" component={Home}/>
<Route path="/projets" component={Projets}/>
<Route path="/projets/graphisme-maquettes" component={Design}/>
<Route path="/projets/web" component={Web}/>
<Route path="/contact" component={Contact}/>
</div>
</div>
</HashRouter>
</div>
);
}
}
export default App;
Thanks in advance, I hope you have everything your need, I really "just" need guidance in how to write all of this without changing the way it works so much, I hope it's actually doable...