Reactjs 如何使用材质UI AppBar onTitleClick属性在React中呈现新组件？

我正在尝试使用

onTiTleClick

属性渲染新组件。这是我的组件代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import AppBar from 'material-ui/AppBar';
import LoginButton from './LoginButton';
import LogoutButton from './LogoutButton';

class Header extends Component {
  constructor(props) {
    super(props);
    this.handleTitleClick = this.handleTitleClick.bind(this);
  }

  renderButton() {
    switch (this.props.auth) {
      case null:
        return
      case false:
        return <LoginButton />
      default:
        return <LogoutButton />
    }
  }

  handleTitleClick() {
    console.log(this)
    return(
      <Link to={this.props.auth ? '/courses' : '/'}></Link>
    );
  }

  render() {
    const styles = {
      title: {
        cursor: 'pointer',
      },
    };

    return(
      <AppBar
        title={<span style={styles.title}>QueueMe</span>}
        onTitleClick={this.handleTitleClick}
        iconElementRight={this.renderButton()}
        showMenuIconButton={false}
      />
    );
  }
}

/*
 * @input: redux state
 * Allows the component to access certain piece of the state as props
 * Reducers determine the key in the state
 */
function mapStateToProps(state) {
  return { auth: state.auth };
}

export default connect(mapStateToProps)(Header);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“物料ui/AppBar”导入AppBar；
从“/LoginButton”导入登录按钮；
从“./LogoutButton”导入LogoutButton；
类头扩展组件{
建造师（道具）{
超级（道具）；
this.handleitleclick=this.handleitleclick.bind（this）；
}
renderButton（）{
开关（this.props.auth）{
大小写为空：
返回
案例错误：
返回
违约：
返回
}
}
handleTitleClick（）{
console.log（这个）
返回(
);
}
render（）{
常量样式={
标题：{
光标：“指针”，
},
};
返回(
);
}
}
/*
*@input:redux状态
*允许组件作为道具访问状态的某些部分
*还原器确定状态中的键
*/
函数MapStateTops（状态）{
返回{auth:state.auth}；
}
导出默认连接（MapStateTops）（标题）；

我正在传递一个链接标记，但我认为它不起作用，因为我只是返回链接标记，而没有进行实际的重定向。如何定义一个能够将我重定向到

/courses

或

/

并将其传递到

AppBar

的

onTitleClick

属性的函数？谢谢

使用HOC-您将获得一个道具，可以使用它以编程方式调整路线

import { withRouter } from 'react-router'

class Component extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.history.push('/courses')}>
        click me
      </button>
    )
  }
}

export default withRouter(Component)

我强烈推荐-您可以使用

compose

helper将它们链接在一起

export default compose(connect(...), someOtherHoC(...), withRouter)(Component)

export default compose(connect(...), someOtherHoC(...), withRouter)(Component)