My OnePage application reloads at every change of page

I am developing a React application. (React 17.02,

What is happening is that everytime I click on a link on a page, it reloads the entire application starting from index.js.

This is my App.js file:

  return (
    <>
      <Router>
        <Suspense fallback={<div>Loading...</div>}>
          <Header />
          <Switch>
            <Route path='/privacy' exact component={Privacy} />
            <Route path='/about' exact component={About} />
            <Route path='/nick' exact component={Wines} />
            <Route path='/home' exact component={Home} />
            <Route path='/' exact component={Home} />
            <Route component={Err404} />
          </Switch>
          {window.location.href.indexOf("/nick") === -1 ? <Footer /> : <></>}
        </Suspense>
      </Router>
      <CookiesDeclaration />
    </>
  );
}

I implemented a login component, and put it into my Header:

         <Nav className="main-header">
            <Nav.Link" href="/">Home</Nav.Link>
            <Nav.Link" href="/about">about</Nav.Link>
            <Nav.Link" href="mailto:info@example.com">Contact")}</Nav.Link>
            <Login /> 
         </Nav>

the footer is easier too:

    <div className="footer_container"> 
          <Nav className="main-header">
            <Nav.Link href="/privacy">Privacy terms</Nav.Link>
            <Nav.Link href="/terminiDiServizio">Termini di servizio</Nav.Link>
          </Nav>
    </div>

So, there is an header, a footer and the rest of the page.

Usually, clicking one of these links, the page should be simply displayed between the header and the footer, changing only the content of the single route.

But it reload all the page.

I never noticed this behavior, because I had no session related information.

Then, I added the Login component reactjs-social-login, which runs really well.

But, after a User logged in, if I hit any link, the entire index.js page is reloaded, then the App.js page, restarting all the page from scratch, and the login is lost, because the Header component which in turn contains the Login component containing all the Login information, is reloaded again too, and all the status information are lost.

In my ingenuity, I was convinced that React just reloaded, thru the router, only the page corresponding to the selected route, whit an behaviour analog to the one we used with JQuery, to reload only a portion of the page.

Can you help me to find where the problem is and how to solve it?

---

NEW NOTICES AFTER HAVING APPLYED THE SOLUTION

The suggested solution demonstrates to run on the Header and Footer page.

But, when I tried to apply it to my home page, I have a very strange behavior:

In the middle of my home page I have a button, with a Link:

the original version was with a <a /> tag and obviously gave the same problem described above. So I changed it with <Link /> as suggested.

Here is the code:

            <Link to="/nick" >
              <div className="hoverable" style={{
                backgroundColor: "#00AC4E", borderRadius: "15px", width: "300px", height: "40px",
                fontWeight: "bolder", marginTop: "20px",
                display: "flex", justifyContent: "space-around", alignItems: "center", fontSize: "24px"
              }}>
                <span style={{ backgroundColor: "transparent", color: "#F3EED9" }}>{t(`misc.tryNick`)}</span>
              </div>
            </Link> 

And the result has been a full reload of the main page,

while with this simpler piece of code, it runs smoothly as expected:

            <Link to="/nick" >{t(`misc.tryNick`)}</Link>

Can someone explain why? It should be a simple matter of styling with a div in the middle!

Sounds like your <Nav.Link is not work like Link in react-router-dom. Try:

import { Link } from "react-router-dom";
...
<Link to="/">Home</Link>
...

instead of <Nav.Link" href="/">Home</Nav.Link>

Docs

or you can use a custom element type for Nav.Link with as prop.

import { Link } from "react-router-dom";
...
<Nav.Link as={Link} to="/" >Home</Nav.Link>