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?

>Solution :

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>