Localize App.js

About.js

import { I18n } from "aws-amplify";
import { Link } from "react-router-dom";

function About() {
  return (
    <section id="aboutSection">
      <p>{I18n.get("aboutTitle")}</p>
      <p>
        Go to <Link to="/">Home</Link>
      </p>
    </section>
  );
}

export default About;

App.js

import "./App.css";
import languages from "./languages";
import {
  createBrowserRouter,
  RouterProvider,
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

import { I18n } from "aws-amplify";
I18n.putVocabularies(languages);

I18n.setLanguage("en");

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Home.js

import { I18n } from "aws-amplify";
import { Link } from "react-router-dom";

function Home() {
  return (
    <section id="mainSection">
      <p>{I18n.get("mainTitle")}</p>
      <p>{I18n.get("secondaryTitle")}</p>
      <p>
        Go to <Link to="about">About Us</Link>
      </p>
    </section>
  );
}

export default Home;