时间戳

首页 > 解决方案 > href vs 链接反应？JS 不是基于 HTML 标签加载的

html - href vs 链接反应？JS 不是基于 HTML 标签加载的

问题描述

我试图了解这是否是 REACT 或 css 问题，例如。我在 React 组件中有以下代码：

       <div className="left">
        <Link to="/" className="brand">
          <img src={Logo} alt="" />
        </Link>
      </div>

      <div className="right">
        <div className="primary-nav">
          <ul className="navigation">
            <li className="active">
              <Link to="/">Home</Link>
            </li>
          </ul>
        </div>
      </dic>

第一个链接不起作用，主要是如果 Link 元素被包裹在 Div 或任何其他看起来它没有正确重新加载页面的情况下。例如，一些 .js 文件未加载，dom 中的图片，因此页面无法正常工作。而如果我使用第二个链接，一切都按预期工作。我看不出 React 有什么不同，因此在我看来是 CSS 问题？

一旦我按照下面的方法包装了第一个 div 元素，它就起作用了。

      <div className="primary-nav">
        <ul className="left">
          <li>
            <Link to="/index.html" className="brand">
              <img src={Logo} alt="" />
            </Link>
          </li>
        </ul>
      </div>

此外，如果我将此链接替换为 a 和 href 元素，那么这也可以！

我不确定这是否与 Css 问题有关，如果是，那为什么会影响页面重新加载？或者，如果这是 React 专家看到的直接并且很容易修复的东西？

标签： htmlreactjsnavigationhtml-lists

解决方案

不要将您的 React 代码视为简单的 HTML 。实际上事情是那反应使用 JSX 代码。这意味着它与原始 html 有点不同。没错，最后 React 将 jsx 代码转换为 Html 。但内部反应管理一个 JSX 元素。

现在我们要去你的点 href 和 Link 是不同的东西，因为 href 是使用 html 默认 javascript 的 html 属性，或者你可以说核心 javascript 但 Link 意味着你正在跟踪某些东西，或者我们可以说使用你自己的 javascript 管理某些东西。请参阅注意一件事，当您使用 href 时，您的页面将刷新，而当您使用Link时，它可能不会刷新您的整个 Dom 取决于您的编码，但是当您使用 react 时，您需要使用 Link更好的实践。它还将提高您的 Web 应用程序的质量。

推荐阅读