Reactjs 如何使用reactrouterdom导航到网页中的其他路由

我正在学习使用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;