React JS项目中如何实现特定路由页面隐藏Header与Footer

核心问题说明 #

原有写法中window.location.pathname不属于React的响应式状态，路由切换不会触发Navbar组件的state或props更新，因此render方法不会重新执行，隐藏逻辑无法生效。

方案1：绑定路由状态实现响应式路径判断（最常用） #

如果项目使用React Router管理路由，可以直接将路由状态绑定到组件的props/state，路径变化会自动触发组件重渲染。

React Router v5 适配写法 #

使用官方提供的withRouter高阶组件注入路由属性：

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

class Navbar extends Component {
  render() {
    const { user, location } = this.props;
    const hidePaths = ["/sign-in", "/sign-up", "/vehicles/reservation"];
    if (hidePaths.includes(location.pathname)) return null;
    return (
      <header className="bg-gray-200 sticky z-50 h-20 md:h-auto top-0">...</header>
    );
  }
}

export default withRouter(Navbar);

React Router v6 适配写法 #

v6版本移除了withRouter，可以将组件改为函数组件使用useLocation钩子获取响应式路径：

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

function Navbar({ user }) {
  const location = useLocation();
  const hidePaths = ["/sign-in", "/sign-up", "/vehicles/reservation"];
  if (hidePaths.includes(location.pathname)) return null;
  return (
    <header className="bg-gray-200 sticky z-50 h-20 md:h-auto top-0">...</header>
  );
}

export default Navbar;

方案2：嵌套路由布局隔离（更易维护） #

不需要在Header组件内维护路径判断逻辑，直接通过嵌套路由拆分两类页面的布局，后续扩展更方便：

import { createBrowserRouter, Outlet } from 'react-router-dom';
import Navbar from './Navbar';
import Footer from './Footer';

// 公共布局组件：带Header和Footer
function CommonLayout() {
  return (
    <>
      <Navbar />
      <Outlet /> {/* 子路由内容渲染位 */}
      <Footer />
    </>
  )
}

// 全局路由配置
const router = createBrowserRouter([
  // 需要Header/Footer的页面，作为公共布局的子路由
  {
    element: <CommonLayout />,
    children: [
      { path: "/", element: <HomePage /> },
      { path: "/vehicles", element: <VehiclesPage /> }
    ]
  },
  // 不需要公共布局的页面，单独配置
  { path: "/sign-in", element: <SignInPage /> },
  { path: "/sign-up", element: <SignUpPage /> },
  { path: "/vehicles/reservation", element: <ReservationPage /> },
])

自定义路由场景适配方案 #

如果项目没有使用React Router，自行实现的路由逻辑，可以通过监听路由变化事件将路径存入组件state，触发重渲染：

class Navbar extends Component {
  state = {
    currentPath: window.location.pathname
  }
  componentDidMount() {
    const handlePathChange = () => {
      this.setState({ currentPath: window.location.pathname })
    }
    // 监听history模式路由变化
    window.addEventListener('popstate', handlePathChange);
    // 监听hash模式路由变化
    window.addEventListener('hashchange', handlePathChange);
    this.unlisten = handlePathChange;
  }
  componentWillUnmount() {
    window.removeEventListener('popstate', this.unlisten);
    window.removeEventListener('hashchange', this.unlisten);
  }
  render() {
    const {user} = this.props;
    const hidePaths = ["/sign-in", "/sign-up", "/vehicles/reservation"];
    if (hidePaths.includes(this.state.currentPath)) return null;
    return (
      <header className="bg-gray-200 sticky z-50 h-20 md:h-auto top-0">...</header>
    );
  }
}

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