如何使用Material-UI AppBar onTitleClick属性在React中渲染新组件？

Question

I'm trying to render a new component using the onTiTleClick property. Here's my component's code

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);

I'm passing a Link tag but I think it's not working because I'm only returning the link tag and not doing the actual redirecting. How can I defined a function that is able to redirect me to /courses or / and pass it to the onTitleClick property of the AppBar ? Thanks!

Answer 1

use the withRouter HOC - you'll get a history prop you can use to adjust the route programatically.

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)

I noticed you're also using react-redux . Something that really bothered me when working with a bunch of libraries that had their own HoCs was figuring out the eventual export. You'd end up with a bunch of intermediary components that just pollute your code

const x = connect(...)(Component)
const y = someOtherHoC(...)(x)
export default withRouter(x)

I highly recommend recompose - you can use the compose helper to chain them together

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