React-Scroll - 链接不起作用 - 在 html 中显示为空的 <a> 标记答案

【问题标题】：React-Scroll - Link not working - appears as empty <a> tag in htmlReact-Scroll - 链接不起作用 - 在 html 中显示为空的 <a> 标记
【发布时间】：2022-08-05 16:12:59
【问题描述】：

更新 2：已解决。这是由于造型不佳。我的应用程序中有一个背景 div，我设置了溢出：自动；它正在阻止 react-scroll 工作。它甚至不需要。我删除了它，它解决了问题。

更新：我认为更清楚是个好主意，所以我将我的项目复制到codesandbox。我在沙盒中仍然遇到同样的问题。如果任何人都可以看到任何问题，我肯定希望得到您的帮助。

我正在尝试创建我的第一个投资组合页面。

当我单击 Nav 组件中指向其他组件的链接时，我试图实现平滑滚动，例如这个 About 组件。我正在使用反应滚动。

这是我的 Nav.js 组件。

import { Link } from \"react-scroll\";

const NavBar = () => {

  return (
      <div className={`${classes.navbar} ${navBarDarkLightClasses}`}>
        <Link to=\"about\" spy={true} smooth={true} offset={50} duration={500}>
          About
        </Link>
      </div>
  );
};

export default NavBar;

这是我要链接到的 About.js 组件。

const About = () => {
  return (
    <section>
      <div id=\"about\" className={classes.image}>
        <img src={profilePhoto} alt=\"profile photo\"/>
      </div>
    </section>
  );
};

export default About;

然而。什么都没发生。当我在浏览器中查看 html 时，链接显示为 About 并且不包含我期望的 href。

非常感谢任何帮助。

你好亚历克斯，你解决了这个问题吗？
是的。这是一个CSS样式问题。我有溢出：汽车正在阻止一切工作。如果您遇到同样的问题，我建议您开始购买更改您的 css 文件

标签： reactjs react-scroll

【解决方案1】：

变化：

import React from "react"; 添加在文件顶部
组件应导入 App.js

例子：

{root-dir}/components/navBar.js:

import React from "react";
import { Link } from "react-scroll";

const NavBar = () => {
  return (
    <div>
      <Link to="about" spy={true} smooth={true} offset={50} duration={500}>
        About
      </Link>
    </div>
  );
};

export default NavBar;

{root-dir}/components/aboutSection.js:

import React from "react";

const About = () => {
  return (
    <section>
      <div id="about">
        <img src={profilePhoto} alt="profile photo"/>
      </div>
    </section>
  );
};

export default About;

App.js:

import React, { Component } from "react";
import NavBar from "./components/navBar";
import About from "./components/aboutSection";

export default class App extends Component {
  render() {
    return (
      <>
        <NavBar />
        <About />
      </>
    );
  }
}

【讨论】：

感谢您花时间回答我的问题。这是我第一次在 stackoverflow 上提出问题，但我认为我没有提供足够的信息。我将 creat-react-app 与 React 17 一起使用，因此无需将 React 导入每个组件。但是我确实尝试了您的建议，但不幸的是它没有效果。我还将组件导入到我的 App.js 中。

【解决方案2】：

据我所知，您的代码没有任何问题。但是，您的课程和/或样式可能存在一些问题。

呈现的链接不应该有任何href。 Link 组件应该在没有它的情况下处理滚动。

您可以根据您提供的代码查看this working example sandbox。然后，也许，您可以快速找出代码的问题。

【讨论】：

谢谢！我怀疑这可能与我的造型有关。我正在使用模块。感谢您提供这个沙盒！我已经看了一下，看看它是否有帮助。
感谢您向我介绍codesandbox。我以前没用过，看起来真的很有用。我已将我的项目复制到沙箱中。如果有时间，如果您能快速浏览一下，那就太好了。
当然，如果你有任何问题，我可以看看。我已经看到问题中链接的沙箱有一些组件，但它们现在几乎是空的。如果您在使用 react-scroll 时遇到问题，请告诉我，我会尽力帮助您。
似乎我没有将代码保存在组件中！我以前没有使用过codesandbox，因为代码正在运行，我只是假设它也意味着它被保存了。谢谢你的帮助！

【解决方案3】：

此错误可能是由 CSS 中的样式问题引起的。我也有同样的挑战。就我而言，该错误来自我的根元素中的样式，我具有以下样式：

html {
    height: 100vh; 
}

删除 height 属性后一切正常。对于遇到类似挑战的任何人，我建议您查看您的 CSS 以查看导致错误的规则。

【讨论】：

【解决方案4】：

将名称“about”添加到该部分以进行引用，以便滚动可以定位它


import React from "react";

const About = () => {
  return (
    <section name="about">
      <div id="about">
        <img src={profilePhoto} alt="profile photo"/>
      </div>
    </section>
  );
};

【讨论】：