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

Question

Basically I'm trying to remake some simple web page that I have initially created with HTML and CSS to be working rather on React. I managed to redo the page to correctly display when it was moved into React, however I don't really understand why the navigation links that I have on top do not take me to the corresponding section on the same page anymore as well as why the external links to the project sites also stopped working.

Here is the project link code:

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>
 );
}

All props are getting mapped and loaded from the array with corresponding data where each object looks like this:

  {
    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"
  }

The navigation links used are the following:

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>
 );
}

And each section they refer to have an id corresponding to the href indicated above.

Here if the link to this project on codesandbox

PS Everything used to work correctly when it was on HTML. Also the contact links that seem to be set in similar way as project links are working.

Answer 1

It looks like there's no href prop. Sounds like what you want is something like

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

which would evaluate to href="#tribute_page" in this example.

Answer 2

You Have to try that your page url become:

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

Not:

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

please attend to that / in address bar!

Answer 3

Here are two things I think I found out:

In the ProjectTile.js file, replace href = {props.href} by href={props.link_id and now project opens in codepen.

About the jump link you have made in nav-bar, I think it's because of problem of codesandbox.

If you manage to make your url to https://op6gq.csb.app#projects instead of https://op6gq.csb.app/#projects . That's gonna work.

Or directly visiting https://op6gq.csb.app/#welcome-section jump link too works well.