ReactJS如何在注册/登录页面移除Header和Footer组件

不用新建布局组件，我们可以直接在现有的Template里根据当前路由路径来控制Header和Footer的显示状态。下面分两种常用的React Router版本给出实现方案：

方案一：React Router v5及以下版本（类组件适配） #

首先我们需要让Template组件能获取到当前路由的路径信息，这可以通过withRouter高阶组件来实现：

1. 先导入withRouter：

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

2. 修改Template组件的渲染逻辑，根据路径判断是否显示布局组件：

class Template extends React.Component {
 render() {
  const { children, location } = this.props;
  // 定义需要隐藏Header/Footer的页面路径
  const excludedPaths = ['/signup', '/signin'];
  // 判断当前路径是否需要显示布局
  const shouldShowLayout = !excludedPaths.includes(location.pathname);

  return (
   <main>
    {/* 只有非排除路径才渲染Header */}
    {shouldShowLayout && <Header/>}
    {children()}
    {/* 只有非排除路径才渲染Footer */}
    {shouldShowLayout && <Footer/>}
   </main>
  )
 }
}

Template.propTypes = {
 children: PropTypes.func
}

// 用withRouter包裹组件，注入路由相关props
export default withRouter(Template);

方案二：React Router v6版本（函数组件适配） #

React Router v6移除了withRouter，我们可以改用useLocation钩子来获取当前路由信息，同时把Template改成函数组件（如果不想改类组件，也可以通过自定义高阶组件来传递location，但函数组件更简洁）：

import { useLocation } from 'react-router-dom';
import PropTypes from 'prop-types';

const Template = ({ children }) => {
  const location = useLocation();
  const excludedPaths = ['/signup', '/signin'];
  const shouldShowLayout = !excludedPaths.includes(location.pathname);

  return (
   <main>
    {shouldShowLayout && <Header/>}
    {children()}
    {shouldShowLayout && <Footer/>}
   </main>
  );
};

Template.propTypes = {
 children: PropTypes.func
};

export default Template;

补充说明 #

• 这个方案完全复用了现有Template组件，不需要新建任何布局文件；
• 如果你后续需要新增其他不需要显示Header/Footer的页面，只需要把对应的路径添加到excludedPaths数组里即可；
• 确保你的路由配置中，signup和signin页面的路径和excludedPaths里的一致（比如如果路径是/user/signup，就要改成对应的字符串）。

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