New to React, I am trying to link 2 pages, it does not render but the path is displayed in the browser

Very newbie question but I am stuck with it since 2 days. What am I doing wrong?

As per title, I am simply trying to connect a game cover image to another page containing more details about it. Once clicking on the link, nothing happens, however the path is displayed on the browser. If pressing enter directly on the browser, the page I want loads properly...

This is the App.js:

import './App.css';
import React from 'react';

import Header from './Components/Header';
import Navbar from './Components/Navbar';
import Main from './Components/Main';
import Footer from './Components/Footer';
import SingleGame from './pages/SingleGame';

import { BrowserRouter, Route, Router, Switch, Link}  from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <div className="App bg-gray-900 text-white">
        <Header>
          <Navbar />
        </Header>
        <Switch>
          <Link>
            <Route exact path="/" component={Main} />
            <Route path="/singlegame" component={SingleGame} />
          </Link>
        </Switch>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;

This is the Main page containing all of the images:

   <div className="popular-games text-sm grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-6 gap-12 border-b border-gray-800 pb-16">
        <div className="game mt-8">
          <div className="relative inline-block">
            <BrowserRouter>          
                <Link to={"/singlegame"}>
                  <img
                    src={ff7}
                    alt="ff7"
                    className="hover:opacity-75 transition ease-in-out duration-150"
                  />
                </Link>           
            </BrowserRouter>
            <div className="absolute bottom-12 -right-1  w-16 h-16 bg-gray-800 rounded-full">
              <div className="font-semibold text-xs flex justify-center items-center h-full">
                80%
              </div>
            </div>
            <BrowserRouter>
              <Link
                to={"/singlegame"}
                className="block text-base font-semibold leading-tight hover:text-gray-400 mt-8"
              >
                Final Fantasy VII Remake
              </Link>
            </BrowserRouter>

I am pretty sure I am missing something but can't really figure it out!

FYI I am running the following version of the packages:

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",

thanks!