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

【问题标题】：My OnePage application reloads at every change of page我的 OnePage 应用程序在每次更改页面时重新加载
【发布时间】：2022-01-28 20:18:42
【问题描述】：

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

发生的情况是，每次我单击页面上的链接时，它都会从 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 和页面的其余部分。

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

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

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

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

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

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

您能帮我找出问题所在以及如何解决吗？

应用解决方案后的新通知

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

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

在我的主页中间有一个按钮，带有一个链接：

原始版本带有<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！

【问题讨论】：

标签： reactjs react-router react-cookie

【解决方案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 属性的自定义元素类型。

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

【讨论】：

那么，关于import { Nav, Navbar, NavDropdown, Container } from 'react-bootstrap'; 的问题出现了：它的含义和用途是什么？
一切都与风格有关。如果你想像Link 一样使用<Nav.Link，你可以这样做<Nav.Link as={Link} to="/" >Home</Nav.Link>。然后您将拥有来自react-bootstrap 的样式和来自react-router-dom 的行为

【解决方案2】：

您可以使用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。请注意，页面不会重新加载，并且在浏览路线时状态保持不变..

【讨论】：

【解决方案3】：

是的，您必须使用反应路由器提供的链接而不是引导程序的链接。并且不要忘记按照 Vitaliy Rayets 的建议将“href”更改为“to”。

【讨论】：