React：为什么我在 React 组件中的链接不像在纯 HTML 页面中那样工作？

Question

基本上，我正在尝试重新制作一些简单的 web 页面，这些页面是我最初使用 HTML 和 CSS 创建的，以便在 React 上工作。 我设法重做页面以在将其移入 React 时正确显示，但是我真的不明白为什么我顶部的导航链接不再将我带到同一页面上的相应部分以及为什么指向项目网站的外部链接也停止工作。

这是项目链接代码：

import React from "react";

export default function ProjectTile(props) {
return (
  <div className="project-tile" id={props.id}>
    <a href={props.href} target="_blank" id={props.link_id}>
      <img
        className="project_screenshot"
        src={props.img_src}
        alt={props.img_alt}
      />
      <p className="project_name">
        <span className="brackets">&lt;</span> {props.title}{" "}
        <span className="brackets">/&gt;</span>
      </p>
    </a>
  </div>
 );
}

所有道具都从数组中映射和加载，其中每个 object 看起来像这样：

  {
    id: "tribute_page",
    link_id: "https://codepen.io/konstantinkrumin/full/PooYQbG",
    img_src: "https://i.imgur.com/ynRuzOQ.png",
    img_alt: "tribute_page_screenshot",
    title: "Tribute Page"
  }

使用的导航链接如下：

import React from "react";

export default function Navbar() {
  return (
    <nav id="navbar">
    <a className="nav-link" href="#welcome-section">
      About
    </a>
    <a className="nav-link" href="#projects">
      Projects
    </a>
    <a className="nav-link" href="#contact">
      Contact
    </a>
  </nav>
 );
}

他们引用的每个部分都有一个对应于上述 href 的 id。

如果在代码沙箱上链接到这个项目

PS 当它在 HTML 上时，一切都可以正常工作。 此外，似乎以与项目链接类似的方式设置的联系链接正在工作。

Answer 1

看起来没有href道具。 听起来你想要的就像

href={`#${props.id}`}

在此示例中，这将评估为href="#tribute_page" 。

Answer 2

您必须尝试将您的页面 url 变为：

https://op6gq.csb.app#welcome-section

不是：

https://op6gq.csb.app/#welcome-section

请注意/在地址栏中！

Answer 3

以下是我发现的两件事：

在ProjectTile.js文件中，将href = {props.href}替换为href={props.link_id ，现在项目在 codepen 中打开。

关于您在导航栏中制作的跳转链接，我认为这是因为codesandbox的问题。

如果你设法让你的 url 变成https://op6gq.csb.app#projects而不是https://op6gq.csb.app/#projects 那会奏效的。

或者直接访问https://op6gq.csb.app/#welcome-section跳转链接也可以。