En el momento en la barra de enlaces, hago clic en un mazo que ves, pero ves un mazo encima de otro y deja la página enormemente grande. Quisiera saber como hacer que se vea solo la baraja que presioné.

 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;

Lo que veis ahí es el esqueleto de lo que he hecho hasta ahora y he puesto router, he quitado switch porque estaba desactualizado... Esto funciona pero no como me gustaría.