React Router changes URL but doesn't update the page unless it was refresh from browser

So I watched a lot of tutorials on YouTube about React for beginners, However, I was at this URL (localhost/) and clicked on the Settings button changes URL to (localhost/settings) and doesn't do automatically in the browser, If I refreshed the browser with the URL (localhost/settings), the page updated and rendered from Settings.js

Here is my code and JS if you mind helping me: header.js

class Header extends Component {

    state = {
        MainMenuAppeared:false
    }

    MainMenuShow = () =>{
        this.setState({
            MainMenuAppeared: true
        })
    }

    MainMenuHide = () =>{
        this.setState({
            MainMenuAppeared: false
        })
    }

    render() {
        return (
            <div className="Header">
              <header>
                  {this.state.MainMenuAppeared ? (
                    <div id="logo" onClick={this.MainMenuHide}><WebLogo /></div>
                  ) : (
                    <div id="logo" onClick={this.MainMenuShow}><WebLogo /></div>
                  )}

                {this.state.MainMenuAppeared ?(
                    <Router>
                <div id="MainMenu">
                    <Link to="/"><div className="MenuLists">Home</div></Link>
                    <Link to="/settings"><div className="MenuLists">Settings</div></Link>
                </div></Router>) : (<div></div>)}
              </header>
            </div>
          );
    }
}

Main.js (formerly App.js)

function Main() {
  return (
    <div className="Main">
      <Header />
      <br></br>
      <br></br>
      <br></br>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/settings" component={Settings}/>
        </Switch>
      </Router>
    </div>
  );
}

Settings.js

function Settings() {
  return (
    <div className="Settings">
     Settings
    </div>
  );
}