如何使用react-router-dom导航到网页中的另一条路线？

Question

我正在学习使用 React，但遇到了一个问题。如果您能帮助我，我将不胜感激。在一个组件中，我插入了一个链接，我希望它在单击时将用户带到一个全新的页面（在我自己的网站内）进行显示，但我无法实现它。

阅读和观看视频，我发现它是使用“react-router-dom”完成的。我已经设法使其部分工作，但它将组件信息插入到我的主页中，而我正在寻找的是能够在我的网站的新页面上访问该新路线或组件。换句话说，我不知道如何渲染链接的组件。谢谢！

///我要重定向到的链接所在的组件

import React from "react";
import { Link } from "react-router-dom";

function Skills() {
    return(
        <div id = "bioContainer">
            <h2>My Skills</h2>
                <div id = "bioText">
                    <ul className="skills-list">
                        <li className="frontend">HTML</li>
                        <li className="frontend">CSS</li>
                        <li className="frontend">React</li>
                        <li>Javascript</li>
                        <li className="backend">Node.js</li>
                        <li>Github</li>
                        <li className="backend">PostgreSQL</li>
                        <li>Python</li>
                    </ul>
                    <h2>"xxx</h2>
                    <h3>Who am I?</h3>
                    <p className="about">xxx</p>
                    <Link to="/Bio">See more</Link>
                </div>
        </div> 
    );
}

export default Skills;

/// 应用程序组件

import React from "react";
import Header from "./Header";
import Skills from "./Skills";
import Projects from "./Projects";
import Footer from "./Footer";
import Get_in_touch from "./Get_in_touch";
import Bio from "./Bio";
import {Route, Routes} from "react-router-dom";

function App() {
  return (
      <div className="App">
          <Header />
          <Skills />
          <Routes>
            <Route path="/bio" element={<Bio />} />
          </Routes>
          <Projects />
          <Get_in_touch />
          <Footer />
      </div>
  );
}

export default App;

Answer 1

如果您希望

Skills

在与

Bio

不同的页面上呈现，请为其创建单独的路由。

示例：

function App() {
  return (
    <div className="App">
      <Header />
      <Routes>
        <Route path="/" element={<Skills />} />
        <Route path="/bio" element={<Bio />} />
      </Routes>
      <Projects />
      <Get_in_touch />
      <Footer />
    </div>
  );
}

如果您愿意，您也可以对

Projects

和

Get_in_touch

执行相同操作。