React如何在指定员工面板页面隐藏全局Menu与Footer组件

你当前用的是React Router v5的写法，提供两种改动成本不同的方案可选： #

方案1：路径判断法（改动最小，适合仅1-2个页面需要隐藏的场景） #

直接在App组件中获取当前路由路径，判断是否为员工面板路径，动态控制Menu、Footer的渲染：

1. 首先从react-router-dom导入useLocation钩子
2. 拿到当前路径后定义隐藏标识
3. 条件渲染全局组件

修改后的完整App.js代码如下：

import { Router, Switch, Route, useLocation } from 'react-router-dom';
// 其他组件导入保持不变

function App() {
  const location = useLocation();
  // 匹配员工面板路径，后续有其他需要隐藏的页面可以加进判断条件
  const shouldHideLayout = location.pathname === '/panel/employee';

  return (
    <Router>
      <div className="App">
        {!shouldHideLayout && <Menu />}
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/candidates" component={Candidates} />
          <Route path="/employers" component={Employers} />
          <Route path="/jobadverts" component={JobAdverts} />
          <Route path="/jobadvert/detail/:id" component={JobAdvertDetails} />
          <Route path="/cv/:id" component={Cv} />
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={SignUp} />
          <Route path="/postjobadvert" component={JobAdvertPost} />
          <Route path="/panel/employee" component={EmployeePanel} />
          <Route component={NoMatch} />
        </Switch>
        {!shouldHideLayout && <Footer />}
      </div>
    </Router>
  );
}

方案2：路由嵌套法（结构更清晰，适合后续有多页面需要隐藏公共组件的场景） #

将公共布局抽成Layout组件，把需要显示Menu、Footer的路由统一包裹在Layout下，不需要的路由单独放在外层：

import { Router, Switch, Route } from 'react-router-dom';
// 其他组件导入保持不变

// 抽离公共布局组件
const PublicLayout = ({ children }) => {
  return (
    <>
      <Menu />
      {children}
      <Footer />
    </>
  );
};

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          {/* 不需要公共布局的路由优先匹配 */}
          <Route path="/panel/employee" component={EmployeePanel} />
          {/* 剩余所有需要公共布局的路由统一包裹 */}
          <Route path="/" render={() => (
            <PublicLayout>
              <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/candidates" component={Candidates} />
                <Route path="/employers" component={Employers} />
                <Route path="/jobadverts" component={JobAdverts} />
                <Route path="/jobadvert/detail/:id" component={JobAdvertDetails} />
                <Route path="/cv/:id" component={Cv} />
                <Route path="/signin" component={SignIn} />
                <Route path="/signup" component={SignUp} />
                <Route path="/postjobadvert" component={JobAdvertPost} />
                <Route component={NoMatch} />
              </Switch>
            </PublicLayout>
          )} />
        </Switch>
      </div>
    </Router>
  );
}

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