Entonces, soy nuevo en el marco de reacción js. Estoy tratando de hacer un enlace de navegación. pero cuando hizo clic, volvió a renderizar el componente anterior. códigos a continuación

 import React, { Component } from 'react'; import {Card, Button , ListGroup } from 'react-bootstrap' import { Route, Link, BrowserRouter,Routes } from 'react-router-dom' import Mappage from '../mapPage'; import Home from '../home'; import 'bootstrap/dist/css/bootstrap.min.css'; class FloorOne extends Component { state = { } render() { // const floors = [1,2,3,4,5,6,7]; return ( <BrowserRouter> <div className='cardContainer'> <ListGroup as ="ul" className='floorCard'> <ListGroup.Item as ="li"> <Link to="/mapPage"> link to map</Link> </ListGroup.Item> <ListGroup.Item as ="li"> <Link to="/home"> buttom home</Link> </ListGroup.Item> <Routes > <Route path="/mapPage" element={ <Mappage/>}/> <Route path="/home" element={<Home/>}/> </Routes> </ListGroup> </div> </BrowserRouter> ); } } export default FloorOne;

utilizo la ruta y las rutas y lo vinculo a un componente como pensé que era una "página". pero el componente anterior todavía aparece en la página otra página en la que navego (ya sea en la página del mapa o en la página de inicio)

esta es la pagina de inicio

 import React, { Component } from 'react'; function Home() { return <div> <h1>this is homepage</h1> </div> ; } export default Home;