hey, tengo una aplicación de reacción y agrego una barra de navegación, pero tengo un problema con el enrutador de reacción: cuando se presiona el enlace "acerca de", la URL cambia a /acerca de pero la pantalla no cambia hasta que actualizo la página cómo puedo arreglarlo?

código (navegación.js):

 import { Link } from 'react-router-dom'; <Nav fill variant="tabs" defaultActiveKey="/home"> <Nav.Item> <Nav.Link> <Link to="/" style={{ textDecoration: 'none' }}>Home</Link> </Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="link-1"> <Link to="/about" style={{ textDecoration: 'none' }}>About</Link> </Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="link-2"> <Link to="/contact" style={{ textDecoration: 'none' }}>Contact</Link> </Nav.Link> </Nav.Item> <Nav.Item> <Nav.Link eventKey="disabled" disabled> School <br /> Chat </Nav.Link> </Nav.Item> </Nav>

código (aplicación.js):

 import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; <Router> <div className="App"> <Navigation /> <Switch> <Route exact path="/"> <HomeScreen /> </Route> <Route path="/about"> <About /> </Route> <Route path="/contact"> <Contact /> </Route> </Switch> </div> </Router>