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跳轉鏈接也可以。