React Router跳转/reactjs时如何隐藏指定组件保留Navbar

当前代码中Intro、Services、Experience三个组件放置在路由匹配容器外部，路由切换不会影响这部分组件的渲染，因此无论跳转到哪个路径，三个组件都会常驻显示。
最符合React Router设计规范的实现方式是：将和路径绑定的渲染内容全部收拢到路由规则中，全站通用的固定组件（如当前的Navbar）保留在路由匹配层外部，即可实现不同路径下的差异化渲染。
修改后的完整代码如下：

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/navbar/navbar";
import Intro from "./components/intro/intro";
import Services from "./components/services/services";
import Experience from "./components/experience/experience";
import TrelloClone from "./pages/TrelloClone/TrelloClone";
import './App.css'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* 导航栏放在路由规则外层，所有路径下都会固定渲染 */}
        <Navbar />
        <Routes>
          {/* 根路径匹配时渲染首页三个模块 */}
          <Route path="/" element={
            <>
              <Intro />
              <Services />
              <Experience />
            </>
          } />
          {/* /reactjs路径匹配时仅渲染TrelloClone组件 */}
          <Route path="/reactjs" element={<TrelloClone />} />
          {/* 后续新增其他子页面路由直接在此处追加即可，默认不会显示首页模块 */}
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

方案说明 #

• 调整后访问根路径/时，页面展示效果和原有逻辑完全一致，不会破坏现有首页的展示
• 访问/reactjs路径时，仅渲染全局Navbar和对应路由的TrelloClone组件，三个首页模块不会被挂载
• 所有路由相关的渲染逻辑统一收敛在路由规则中，后续新增页面不需要额外写隐藏逻辑，可维护性更好

如果不想调整现有代码结构，也可以通过useLocation钩子获取当前路径做条件渲染，但这种方式后续每新增一个子页面都需要修改判断条件，不推荐长期使用：

注意：useLocation钩子必须在BrowserRouter包裹的子组件内部调用，直接在App组件中调用会抛错，需要将路由内的逻辑拆分为独立子组件使用。
核心判断逻辑示例：

const location = useLocation();
// 非/reactjs路径时才渲染三个首页组件
{location.pathname !== "/reactjs" && (
  <>
    <Intro />
    <Services />
    <Experience />
  </>
)}

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