Я делаю компонент navbar, который должен отображать один набор ссылок, если пользователь аутентифицирован, и другой, если пользователь не аутентифицирован. Показанные ссылки не меняются в зависимости от значения состояния. Как я могу решить эту проблему?
Попытался переключить состояние моего редуктора, и, кажется, ничто не влияет на ссылки.
import React, { Fragment } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { logout } from "../../actions/auth";
const Navbar = ({ auth: isAuthenticated, loading }, logout) => {
const guestLinks = (
<ul>
<li>
<Link to="/landing">
<i className="fas fa-car" /> Ruber
</Link>
</li>
<li>
<Link to="/register">
<i className="fas fa-pen" /> Register
</Link>
</li>
<li>
<Link to="/login">
<i className="fas fa-sign-in-alt" /> Login
</Link>
</li>
</ul>
);
const authLinks = (
<ul>
<li>
<i className="fas fa-home" />
<Link to="/home"> Home</Link>
</li>
<li>
<i className="fas fa-history" />
<Link to="/rides"> Past Rides</Link>
</li>
<li>
<i className="fas fa-route" />
<Link to="/create"> Request ride</Link>
</li>
<li>
<i className="fas fa-user" />
<Link to="/user"> User Info</Link>
</li>
<li>
<i className="fas fa-sign-out-alt" />
<Link to="/landing"> Log Out </Link>
</li>
</ul>
);
return (
<nav>
{!loading && (
<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
)}
</nav>
);
};
Navbar.propTypes = {
logout: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(
mapStateToProps,
{ logout }
)(Navbar);
Навбар должен переключаться назад и вперед между guestLinks и authLinks