hey I have a react application and I add a navigation bar but I have a problem with the react-router: when the "about" Link gets pressed the URL is changing to /about but the screen is not changing until I refresh the page how can I fix it?

code (navigation.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>

code (app.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>