如何在Material-UI的导航栏（Navbar）中设置onClick点击事件？

基础概念解释 #

你代码里的this.props.cart和this.props.login是父组件传递给Nav组件的回调函数属性：当用户点击对应图标时，就会触发这两个传入的函数执行。你当前的代码还没有给这两个prop传值，所以点击暂时没有任何效果。

用props传递回调的优势是可以让Nav组件和具体业务逻辑解耦，后续如果要修改点击后的行为，只需要修改父组件传入的函数即可，不需要改动Nav组件本身的代码。

实现点击跳转其他组件的具体步骤 #

React单页应用最常用的跳转方案是使用react-router-dom路由库，操作如下：

1. 安装依赖 #

如果项目还没安装路由库，先执行安装命令：

npm install react-router-dom

2. 根组件配置路由规则 #

在项目的根组件（一般是App.jsx）中配置路由和Nav组件的属性：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
import Nav from './Nav';
import Cart from './Cart'; // 你自己实现的购物车页面组件
import Login from './Login'; // 你自己实现的登录页面组件
import Home from './Home'; // 首页组件

function App() {
  // 路由跳转方法
  const navigate = useNavigate();
  return (
    <Router>
      {/* 导航栏全局展示 */}
      <Nav 
        toggleDrawer={() => {/* 你原来的侧边栏逻辑 */}}
        // 点击购物车跳转到购物车页
        cart={() => navigate('/cart')}
        // 点击用户图标跳转到登录页
        login={() => navigate('/login')}
      />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 补充Nav组件的参数校验（可选推荐） #

在Nav组件的propTypes中补充回调函数的校验规则，避免传参错误：

Nav.propTypes = {
  classes: PropTypes.object.isRequired,
  toggleDrawer: PropTypes.func.isRequired,
  cart: PropTypes.func.isRequired,
  login: PropTypes.func.isRequired,
};

简单跳转方案（不需要路由库） #

如果是多页应用不需要路由，可以直接用原生JS跳转：

// 父组件传参时直接写
<Nav 
  cart={() => window.location.href = '/cart.html'}
  login={() => window.location.href = '/login.html'}
/>

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