1

我正在开发一个 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和页面的其余部分。

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

但它重新加载所有页面。

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

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

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

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

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

应用解决方案后的新通知

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

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

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

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

4

3 回答 3

1

听起来你<Nav.Link不像Link在react-router-dom. 尝试：

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

代替<Nav.Link" href="/">Home</Nav.Link>

文档

或者您可以使用自定义元素类型Nav.Link与as道具。

import { Link } from "react-router-dom";
...
<Nav.Link as={Link} to="/" >Home</Nav.Link>
于 2022-01-28T11:16:15.397 回答
1

您可以使用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>

这是Stackblitz 的复制品。请注意，页面不会重新加载，并且在浏览路线时状态保持不变..

于 2022-01-28T11:51:57.827 回答
-1

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

于 2022-01-28T11:22:09.910 回答