我的 OnePage 应用程序在每次页面更改时重新加载

Question

我正在开发 React 应用程序。（反应 17.02，

发生的事情是，每次我单击页面上的 link 时，它都会重新加载从 index.js 开始的整个应用程序。

这是我的 App.js 文件：

  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 />
    </>
  );
}

我实现了一个登录组件，并将其放入我的 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>

页脚也更简单：

    <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>

因此，有一个 header、一个 footer 和页面的其余部分。

通常，单击这些 link 之一，页面应该简单地显示在页眉和页脚之间，仅更改单个路由的内容。

但它会重新加载所有页面。

我从来没有注意到这种行为，因为我没有会话相关信息。

然后，我添加了登录组件 reactjs-social-login，这运行非常好。

但是，在用户登录后，如果我点击任何 link，将重新加载整个 index.js 页面，然后是 App.js 页面，从头开始重新启动所有页面，并且登录丢失了，因为 Header 组件又包含包含所有登录信息的 Login 组件，也再次重新加载，所有状态信息都丢失了。

凭我的聪明才智，我确信 React 只是通过路由器重新加载了与所选路由相对应的页面，其行为类似于我们在 JQuery 中使用的行为，仅重新加载一个页面的一部分。

你能帮我看看问题出在哪里，如何解决吗？

应用该解决方案后的新通知

建议的解决方案在 Header 和 Footer 页面上向运行演示。

但是，当我尝试将它应用到我的主页时，我有一个非常奇怪的行为：

在我的主页中间有一个按钮，带有 Link:

原始版本带有 <a /> 标签，显然出现了与上述相同的问题。所以我按照建议用 <Link /> 更改了它。

代码如下：

            <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>

结果是主页完全重新加载，

虽然使用这段更简单的代码，它运行如预期的那样顺利：

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

谁能解释一下为什么？中间加一个 div 应该是个简单的样式问题！

Answer 1

听起来你的 <Nav.Link 不像 react-router-dom 中的 Link 那样工作。尝试：

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

而不是<Nav.Link" href="/">Home</Nav.Link>

Docs

或者您可以使用 Nav.Link 的自定义元素类型和 as prop.

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

Answer 2

是的，您必须使用 link 提供的 React 路由器，而不是 bootstrap 的 link。并且不要忘记按照 Vitaliy Rayets 的建议将“href”更改为“to”。

Answer 3

您可以使用 as 道具来定义您的 navLink 的行为，如下所示：

<Nav variant="pills" defaultActiveKey="/home">
  <Nav.Link as={NavLink} to="/">Home</Nav.Link>
  <Nav.Link as={NavLink} to="dashboard">Dashboard</Nav.Link>
  <Nav.Link as={NavLink} to="calendar">Calendar</Nav.Link>
</Nav>

这里是A repro on Stackblitz。请注意，页面不会重新加载，并且在浏览路线时状态保持不变..

我的 OnePage 应用程序在每次页面更改时重新加载

My OnePage application reloads at every change of page

reactjs

react-router

react-cookie