如何在React导航栏列表添加onClick事件以加载对应组件？

方案一：使用React Router（推荐，适合单页应用） #

这是单页应用中管理页面跳转和组件加载的标准方式。

步骤1：安装React Router依赖 #

在项目根目录执行命令：

npm install react-router-dom
# 或
yarn add react-router-dom

步骤2：在根组件配置路由 #

修改App.js，定义每个路径对应的页面组件：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
// 导入你的页面组件
import Home from './Home';
import Assets from './Assets';
import ServiceReport from './ServiceReport';
import ChangeRequest from './ChangeRequest';
import Logout from './Logout';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Assets" element={<Assets />} />
        <Route path="/Servicereport" element={<ServiceReport />} />
        <Route path="/Changerequest" element={<ChangeRequest />} />
        <Route path="/logout" element={<Logout />} />
      </Routes>
    </Router>
  );
}

export default App;

步骤3：修改Navbar组件添加点击事件 #

由于你的Navbar是类组件，需要通过withRouter高阶组件获取路由的history对象来实现跳转：

import React from 'react';
import { withRouter } from 'react-router-dom';
import MenuItems from './MenuItems';

class Navbar extends React.Component {
  // 处理菜单项点击，触发路由跳转
  handleMenuItemClick = (url) => {
    this.props.history.push(url);
  };

  render () {
    const menuItems = [
      { title: 'Home', url: '/' },
      { title: 'Assets', url: '/Assets' },
      { title: 'Service Report', url: '/Servicereport' },
      { title: 'Change Request', url: '/Changerequest' },
      { title: 'Logout', url: '/logout' }
    ];

    return (
      <nav>
        <ul className="menus">
          {menuItems.map((menu, index) => (
            <MenuItems
              items={menu}
              key={index}
              onClick={() => this.handleMenuItemClick(menu.url)}
            />
          ))}
        </ul>
      </nav>
    );
  };
}

// 用withRouter包裹，让类组件能访问路由对象
export default withRouter(Navbar);

步骤4：修改MenuItems组件绑定点击事件 #

如果MenuItems原本渲染的是<a>标签，需要阻止默认跳转行为：

import React from 'react';

const MenuItems = ({ items, onClick }) => {
  const handleClick = (e) => {
    e.preventDefault(); // 阻止a标签默认跳转
    onClick();
  };

  return (
    <li>
      <a href={items.url} onClick={handleClick}>
        {items.title}
      </a>
    </li>
  );
};

export default MenuItems;

方案二：不使用路由，通过状态控制组件显示 #

适合小型应用，不需要路由系统的场景，通过父组件状态切换显示的组件。

步骤1：在根组件维护状态并传递回调 #

修改App.js：

import React, { useState } from 'react';
import Navbar from './Navbar';
// 导入你的页面组件
import Home from './Home';
import Assets from './Assets';
import ServiceReport from './ServiceReport';
import ChangeRequest from './ChangeRequest';
import Logout from './Logout';

function App() {
  const [currentPage, setCurrentPage] = useState('/');

  // 接收Navbar传递的页面路径，更新状态
  const handlePageChange = (url) => {
    setCurrentPage(url);
  };

  // 根据当前状态渲染对应组件
  const renderCurrentPage = () => {
    switch(currentPage) {
      case '/': return <Home />;
      case '/Assets': return <Assets />;
      case '/Servicereport': return <ServiceReport />;
      case '/Changerequest': return <ChangeRequest />;
      case '/logout': return <Logout />;
      default: return <Home />;
    }
  };

  return (
    <div>
      <Navbar onPageChange={handlePageChange} />
      {renderCurrentPage()}
    </div>
  );
}

export default App;

步骤2：修改Navbar组件调用回调 #

import React from 'react';
import MenuItems from './MenuItems';

class Navbar extends React.Component {
  handleMenuItemClick = (url) => {
    this.props.onPageChange(url);
  };

  render () {
    const menuItems = [
      { title: 'Home', url: '/' },
      { title: 'Assets', url: '/Assets' },
      { title: 'Service Report', url: '/Servicereport' },
      { title: 'Change Request', url: '/Changerequest' },
      { title: 'Logout', url: '/logout' }
    ];

    return (
      <nav>
        <ul className="menus">
          {menuItems.map((menu, index) => (
            <MenuItems
              items={menu}
              key={index}
              onClick={() => this.handleMenuItemClick(menu.url)}
            />
          ))}
        </ul>
      </nav>
    );
  };
}

export default Navbar;

步骤3：修改MenuItems组件 #

和方案一中的MenuItems代码一致，绑定点击事件即可。

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