React路由场景下如何在指定页面隐藏Header、Navbar等公共组件

下面分两种常用的实现方式，均适配你现有项目的技术栈和写法：

方案1：组件内部做路径判断（改动最小，推荐） #

直接在Header、Navbar组件内用useLocation钩子判断当前路径，匹配/settings时直接返回null不渲染即可：

// Header 组件示例代码，Navbar 组件同理修改
import { useLocation } from 'react-router-dom';

function Header() {
  const location = useLocation();
  // 匹配设置页路径时不渲染组件
  if (location.pathname === '/settings') return null;

  // 原有组件的逻辑和渲染代码保持不变
  return (
    <div>
      {/* 原有Header内容 */}
    </div>
  );
}

这个方案不需要修改你的现有路由结构，只需要给两个公共组件加3行判断代码即可。

方案2：路由层控制渲染（不需要修改公共组件代码） #

先修正你现有路由的写法问题：Switch组件的子元素规范上只允许放Route、Redirect这类路由组件，直接放普通组件可能出现不可预期的渲染问题。你可以把公共组件移到Switch外，通过路由匹配规则控制是否渲染：

<div>
  <Router>
    {/* 仅非设置页渲染公共头部和导航 */}
    <Route path="/:path(?!settings)">
      <Header/>
      <Navbar/>
    </Route>
    <Switch>
      <Route exact path = "/" component= { Data } />
      <Route path = "/available-data" component= { Data } />
      <Route path = "/devices" component= { Devices } />
      <Route path = "/contacts" />
      <Route path = "/chat" />
      <Route path = "/settings" component = { Settings } />
    </Switch>
  </Router>
</div>

这里用了正则路径匹配规则/:path(?!settings)，表示只要路径不是/settings开头，都会渲染两个公共组件，不需要手动罗列所有需要展示的页面路径。

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