React应用中点击Register链接后如何仅显示对应组件？

核心问题分析 #

你遇到的问题本质是路由组件和全局固定组件（导航栏）之外的内容没有做路由隔离——如果把FirstSection这类页面级组件直接放在App.js的根节点里，而非路由规则内，那么不管匹配哪个路由，这些组件都会持续渲染。

具体修复步骤 #

1. 重构App.js的路由结构 #

确保只有导航栏这类全局固定内容放在路由外层，页面级组件完全由Routes/Route控制：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar'; // 你的导航栏组件
import FirstSection from './FirstSection';
import Register from './Register';

function App() {
  return (
    <Router>
      {/* 全局固定内容：始终显示 */}
      <Navbar />
      {/* 路由匹配区域：仅渲染匹配到的组件 */}
      <Routes>
        <Route path="/" element={<FirstSection />} />
        <Route path="/register" element={<Register />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 修正FirstSection中的跳转链接 #

必须使用react-router-dom提供的Link组件（而非原生<a>标签）实现单页跳转，避免页面刷新：

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

function FirstSection() {
  return (
    <div className="first-section">
      {/* 组件原有内容 */}
      <Link to="/register">Register</Link>
    </div>
  );
}

export default FirstSection;

3. 移除无效的条件渲染逻辑 #

如果之前用了isRegisterVisible这类状态控制显示，直接删除即可——路由已经完全接管了页面级组件的渲染逻辑，不需要额外的条件判断。

关键注意事项 #

• 所有页面级组件必须嵌套在Route的element属性中，不能直接暴露在Routes之外。
• 禁止用原生<a>标签跳转路由，否则会触发页面重载，破坏单页应用的路由机制。
• 若有页脚这类需要全局固定的组件，可放在Routes的同级位置，和导航栏一起始终渲染。

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