如何通过Material-UI AppBar的onTitleClick属性在React中实现页面跳转？

嘿，我来帮你搞定这个问题！你遇到的核心问题是：onTitleClick是一个点击事件处理函数，直接返回Link组件根本不会触发路由跳转——它只是在回调里返回了一个组件，但既没有渲染它，也没有执行实际的导航逻辑。咱们需要借助React Router提供的导航API来实现页面跳转，下面分两种常见场景给你具体方案：

函数组件（React Router v6+） #

如果你用的是React Router v6及以上版本，推荐使用useNavigate钩子来创建跳转函数：

1. 首先导入useNavigate钩子：

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

2. 在你的组件内部获取navigate函数：

const YourComponent = () => {
  const navigate = useNavigate();

3. 定义点击标题后的跳转逻辑，你可以写两个独立函数，或者根据条件动态跳转：

// 跳转到首页 /
  const handleTitleClickToHome = () => {
    navigate('/');
  };

  // 跳转到课程页 /courses
  const handleTitleClickToCourses = () => {
    navigate('/courses');
  };

4. 把定义好的函数传给AppBar的onTitleClick属性：

return (
    <AppBar onTitleClick={handleTitleClickToHome} />
    // 或者要跳转到课程页就传 handleTitleClickToCourses
  );
};

类组件（React Router v5或兼容写法） #

如果你的项目用的是类组件，或者React Router v5版本，可以用withRouter高阶组件来注入路由导航能力：

1. 导入withRouter和React核心库：

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

2. 在类组件里定义点击事件处理函数，用history.push实现跳转：

class YourComponent extends React.Component {
  // 跳转到首页
  handleTitleClickToHome = () => {
    this.props.history.push('/');
  };

  // 跳转到课程页
  handleTitleClickToCourses = () => {
    this.props.history.push('/courses');
  };

  render() {
    return (
      <AppBar onTitleClick={this.handleTitleClickToHome} />
    );
  }
}

3. 最后用withRouter包裹组件导出，这样组件才能拿到history属性：

export default withRouter(YourComponent);

补充说明 #

为什么直接传Link组件没用？因为onTitleClick接收的是一个事件回调函数，当标题被点击时，会执行这个函数里的代码。而Link是React组件，你在回调里返回它，只是返回了一个组件对象，但并没有把它渲染到DOM中，也不会触发路由跳转。只有调用React Router提供的navigate（v6）或history.push（v5）方法，才能主动触发页面导航。

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