我正在制作一个导航栏组件,如果用户通过了验证,该组件应该显示一组链接,而如果用户未通过,则显示另一组链接。显示的链接不会根据状态的值而改变。我该如何解决这个问题?
尝试切换我的减速器状态,似乎没有任何影响链接。
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之间来回切换