如何使用react-router-dom实现路由跳转并独立渲染目标组件？

我正在学习React，使用react-router-dom实现路由跳转时遇到问题。在Skills组件中添加了<Link to="/Bio">链接，期望点击后跳转到网站内独立的新页面渲染Bio组件，但目前Bio组件仅插入到主页面中，无法实现独立页面展示。

相关组件代码 #

Skills组件

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;

App组件

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;

解决方案 #

1. 统一路由路径大小写
   react-router-dom的路径区分大小写，将Skills组件中Link的路径改为小写：

<Link to="/bio">See more</Link>

2. 重构App组件的路由结构
   原来的App组件直接渲染了Skills、Projects等组件，这些组件会在所有路由页面中显示，导致Bio组件只能插入其中。需要将不同页面的内容放到对应路由的element中：

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 />
          <Routes>
            {/* 首页：显示Skills、Projects、Get_in_touch */}
            <Route path="/" element={
              <>
                <Skills />
                <Projects />
                <Get_in_touch />
              </>
            } />
            {/* Bio页面：仅显示Bio组件 */}
            <Route path="/bio" element={<Bio />} />
          </Routes>
          <Footer />
      </div>
  );
}

export default App;

说明 #

调整后，访问根路径/时会渲染首页的所有组件，点击链接跳转到/bio时，只会渲染Header、Bio和Footer（如果需要Footer全局显示），实现Bio组件独立页面展示的效果。

内容的提问来源于stack exchange，提问作者user24210059