The moment in the link bar I click on a deck you see but you see one deck on top of another and leaves the page enormously large. I would like to know how to make only the deck I pressed look.

import './Navbar.css';
import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';
import Zendikar from '../masCartas/Zendikar';
import Fate from '../uginFate/Fate';
import Welcome from '../welcome2017/Welcome';
import Two from '../twoPlayer/Two';
//import { useNavigate } from 'react-router-dom';

function Navbar() {

  // Constructor
  React.useEffect(() => {
    document.title = "Magic - React";
  }, []);

  //let history = useNavigate();

  return (
    <div className="App">
      <div class='titulo'>
        <h1>Cartas y mazos disponibles</h1>
      </div>
      <Router>
        <table>
          <tr>
            <th><Link to='/zendikar'>
              Zendikar Rising Expeditions
            </Link></th>
            {/* <button onClick={()=>history("/zendikar")}Zendikar Rising Expeditions></button> */}
            <th><Link to='/uginsfate'>
              Ugins Fate
            </Link></th>
            <th><Link to='/2017'>
              Welcome 2017
            </Link></th>
            <th><Link to='/two'>
              Two Players
            </Link></th>
          </tr>
        </table>
        <Routes>
          <Route exact path="/zendikar" element={<Zendikar />}></Route>
          <Route exact path="/uginsfate" element={<Fate />}></Route>
          <Route exact path="/2017" element={<Welcome />}></Route>
          <Route exact path="/two" element={<Two />}></Route>
        </Routes>
      </Router>
    </div >
  );
}

export default Navbar;

What you see there is the skeleton of what I have done so far and I have put router, I have removed switch because it was outdated... This works but not as I would like.