React TypeScript中如何独立设置页面样式并解决首页残留问题

核心问题 #

1. 路径匹配错误：你在Navbar里的Home链接指向/Home，但App组件的switch里没有匹配/Home的分支，仅匹配了/App，导致点击Home时Component未赋值；同时你把Container放在了App的全局返回结构里，它会在所有页面都渲染，这大概率是首页内容出现在其他页面的原因。
2. 原生a标签触发页面刷新：用<a>标签跳转会刷新整个页面，违背React单页应用的路由逻辑，容易引发组件渲染异常。
3. 手动路由判断维护性差：通过window.location.pathname手动切换组件，不仅容易遗漏路径分支，也不符合React路由的最佳实践。

修复步骤 #

1. 安装React Router

先安装官方路由库来管理单页路由：

npm install react-router-dom
# 或使用yarn
yarn add react-router-dom

2. 重构App组件，用React Router管理路由

替换原App代码，将Container移到Home组件内部（如果它是首页专属内容）：

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./Components/Navbar";

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Experience from "./pages/Experience";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Home" element={<Home />} />
        <Route path="/About" element={<About />} />
        <Route path="/Contact" element={<Contact />} />
        <Route path="/Experience" element={<Experience />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 修改Navbar组件，用Link替代a标签

避免页面刷新，保持单页应用的路由状态：

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

export default function Navbar() {
  return (
    <nav className="nav">
      <h1 className="logo">. ALEX -- .</h1>
      <p>Software Engineer/Web Developer</p>
      <ul>
        <li className="nav-items">
          <Link to="/Home">Home</Link>
          <Link to="/About">About</Link>
          <Link to="/Experience">Experience</Link>
          <Link to="/Contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

4. 确保页面组件独立

将首页专属的Container移到Home组件内部，这样只有访问Home页面时才会渲染：

// pages/Home.tsx
import Container from "../Components/Container";

export default function Home() {
  return (
    <>
      {/* 首页专属内容 */}
      <Container />
      {/* 其他首页组件 */}
    </>
  );
}

额外说明 #

现在路由会精准匹配路径，仅渲染对应页面的组件，不会出现首页内容泄漏到其他页面的情况。后续新增页面只需添加新的Route节点即可，路由逻辑更清晰易维护。

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