import React, { Component } from "react";
import { withRouter } from 'react-router';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import { logout } from '../../store/actions/auth';
class Navbar extends Component {
render() {
const { isAuthenticated } = this.props;
//Here I am trying to authenticate a user so once loggedIn the user can
//manage the phlog using the phlog manager link
const phlogManagerLink = (
<div className='nav-link-wrapper'>
<NavLink exact to='/phlog-manager/' activeClassName='nav-link-active'>
<button key='1' className='navbar-links-btn'>
<div className='navbar-links-btn-txt'>
Phlog Manager
</div>
</button>
</NavLink>
</div>
);
const logoutLink = (
<div className='nav-link-wrapper'>
<NavLink exact to='/' activeClassName='nav-link-active'>
<button key='1' className='navbar-links-btn' onClick={this.props.logout()}>
<div className='navbar-links-btn-txt'>
Logout
</div>
</button>
</NavLink>
</div>
);
return (
<div className='phlog-manager-signout-route'>
{
isAuthenticated ? (logoutLink && phlogManagerLink) : (null)
}
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {
isAuthenticated: state.auth.token !== null
};
};
const mapDispatchToProps = dispatch => {
return {
logout: () => dispatch(logout())
// loggedIn: () => dispatch(actions.authCheckState())
};
};
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
) (Navbar)
);
Консоль браузера продолжает выдавать следующие предупреждающие сообщения:
checkPropTypes. js: 20 Предупреждение: сбойный тип пропелла: недопустимая опора component
типа object
, предоставленная для Route
, ожидается function
. в Route (создан App) в App в провайдере
реаги-dom.development. js: 88 Предупреждение. Невозможно обновить компонент (ConnectFunction
) при рендеринге другого компонента (Navbar
). Чтобы найти неправильный вызов setState () внутри Navbar
, следуйте трассировке стека, как описано в