How can I fix this React component not rendering properly when using <Link /> from react-router-dom?

Question

I am trying to build a photography portfolio in React, however, I am not sure if I am using the Link function correctly. Whenever I click a link on the website, it just overlays the new page over the old one. How do I fix it so that it re-renders the new page without being able to see the old one?

For example, when I click a link on the home page, the new one shows up like this:

I have wrapped the entire app in in the index.js file.

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

I have added the routes in app.js and wrapped them in a switch. I have also wrapped the app.js component with withRouter.

class App extends Component {
  render() {
    let routes = (
      <switch>
        <Route path="/" component={Home} />
        <Route path="/Portfolio/Astro" component={Astro} />
        <Route path="/Portfolio/Travel" component={Travel} />
        <Redirect to="/" />
      </switch>
    );

    return (
      <div className="App">
        <Layout>
          <Switch>{routes}</Switch>
        </Layout>
      </div>
    );
  }
}

export default withRouter(App);

The layout component adds the toolbar to the top of the screen:

class Layout extends Component {
    render() { 
        return (
            <Aux>
                <Toolbar />
                <main className={classes.Content}>{this.props.children}</main>
            </Aux>
        );
    }
}
 
export default Layout;

And the navlinks component has all the links for the burger menu when pressed:

const NavLinks = ({ toggle, nav }) => {
  let style;

  if (nav) {
    style = {
      transform: `translate(0)`,
      opacity: 1,
    };
  }

  return (
    <nav className="nav-slide" style={style}>
      <div className="page-links">
        <Link onClick={toggle} to="/" className={`link-page ${nav ? "link-page-open" : ""}`}>
          Home
        </Link>
        <Link onClick={toggle} to="/Portfolio/Astro" className={`link-page ${nav ? "link-page-open" : ""}`}>
          Astro
        </Link>
        <Link onClick={toggle} to="/Portfolio/Travel" className={`link-page ${nav ? "link-page-open" : ""}`}>
          Travel
        </Link>
      </div>
    </nav>
  );
};

export default NavLinks;

Answer 1

also adding to what @Dov Royal said, you don't need the <switch> wrapper. the <Switch> wrapper would suffice

Answer 2

This is because you are using switch in two sections.i suggest you that read react-router-dom docs properly. custom-link in react-router-dom