如何移除React中重复的Navbar？实现组件自定义导航按钮组

方案1：路由匹配+动态配置表 #

把每个路由对应的导航栏右侧按钮做成配置表，Navbar组件根据当前路由自动匹配渲染，不用在每个页面重复引入Navbar。

步骤： #

1. 定义路由-按钮配置表

// src/config/navbarButtons.js
export const navbarButtonConfig = {
  '/component1': () => (
    <div className="btn-group">
      <button>组件1专属按钮1</button>
      <button>组件1专属按钮2</button>
    </div>
  ),
  // 其他路由不需要自定义按钮可留空或不配置
  '/component2': null,
};

2. 改造Navbar组件，根据当前路由渲染对应按钮

// src/components/Navbar.js
import { useLocation } from 'react-router-dom';
import { navbarButtonConfig } from '../config/navbarButtons';

const Navbar = () => {
  const location = useLocation();
  const renderRightButtons = navbarButtonConfig[location.pathname] || (() => null);

  return (
    <nav className="navbar">
      {/* 导航栏左侧固定内容 */}
      <div className="navbar-left">导航标题</div>
      {/* 右侧动态按钮区域 */}
      <div className="navbar-right">{renderRightButtons()}</div>
    </nav>
  );
};

export default Navbar;

3. 保持根组件结构不变，Navbar仅引入一次

// 根组件
return (
  <>
    <Navbar />
    <Router>
      <Route path="/component1" component={Component1} />
      <Route path="/component2" component={Component2} />
    </Router>
  </>
);

这个方案适合按钮与路由固定绑定的场景，新增页面只需在配置表中添加对应项即可。

方案2：Context上下文传递自定义元素 #

如果需要页面组件内部动态控制导航栏按钮（比如根据状态显示/隐藏），可以用React Context实现。

步骤： #

1. 创建NavbarContext

// src/contexts/NavbarContext.js
import { createContext, useContext, useState } from 'react';

const NavbarContext = createContext({
  setRightButtons: () => {},
});

export const NavbarProvider = ({ children }) => {
  const [rightButtons, setRightButtons] = useState(null);

  return (
    <NavbarContext.Provider value={{ setRightButtons }}>
      {children}
    </NavbarContext.Provider>
  );
};

export const useNavbar = () => useContext(NavbarContext);

2. 改造Navbar组件消费Context

// src/components/Navbar.js
import { useContext } from 'react';
import { NavbarContext } from '../contexts/NavbarContext';

const Navbar = () => {
  const { rightButtons } = useContext(NavbarContext);

  return (
    <nav className="navbar">
      <div className="navbar-left">导航标题</div>
      <div className="navbar-right">{rightButtons}</div>
    </nav>
  );
};

export default Navbar;

3. 在根组件包裹Provider

// 根组件
import { NavbarProvider } from './contexts/NavbarContext';

return (
  <NavbarProvider>
    <Navbar />
    <Router>
      <Route path="/component1" component={Component1} />
      <Route path="/component2" component={Component2} />
    </Router>
  </NavbarProvider>
);

4. 在Component1中设置自定义按钮

// src/components/Component1.js
import { useEffect } from 'react';
import { useNavbar } from '../contexts/NavbarContext';

const Component1 = () => {
  const { setRightButtons } = useNavbar();

  useEffect(() => {
    // 设置当前页面的导航栏按钮
    setRightButtons(
      <div className="btn-group">
        <button>组件1专属按钮</button>
      </div>
    );
    // 组件卸载时清空，避免影响其他页面
    return () => setRightButtons(null);
  }, [setRightButtons]);

  return <div>Component1内容</div>;
};

这个方案适合需要动态控制按钮的场景，比如根据接口返回数据显示不同按钮。

方案3：高阶组件（HOC）封装页面 #

用HOC给页面组件注入导航栏按钮配置，统一管理页面与导航栏的关联。

步骤： #

1. 编写HOC

// src/hocs/withNavbarButtons.js
import { useEffect } from 'react';
import { useNavbar } from '../contexts/NavbarContext';

const withNavbarButtons = (PageComponent, buttons) => {
  return (props) => {
    const { setRightButtons } = useNavbar();

    useEffect(() => {
      // 优先使用HOC传入的按钮，没有则留空
      const renderButtons = buttons || (() => null);
      setRightButtons(renderButtons());
      return () => setRightButtons(null);
    }, [setRightButtons, buttons]);

    return <PageComponent {...props} />;
  };
};

export default withNavbarButtons;

2. 包装Component1

// src/components/Component1.js
import withNavbarButtons from '../hocs/withNavbarButtons';

const Component1 = () => {
  return <div>Component1内容</div>;
};

// 直接传入当前页面的导航栏按钮
export default withNavbarButtons(Component1, () => (
  <div className="btn-group">
    <button>组件1专属按钮</button>
  </div>
));

这个方案适合统一管理所有页面的导航栏配置，减少重复代码。

内容的提问来源于stack exchange，提问作者J.Porter