I must add login to navbar in React - reactjs

Question

I must add login system to navbar, but when I login in anywhere, navbar does not appear. How can I solve it?
Navbar shows normally with no login system.
Navbar is on App.js.
authLinks - Section just for authenticated users (Dashboard and Log out buttons)
guestLinks - Section just for not-authenticated users (Login form in here)
My navbar + login:
import React, { Fragment, useState } from "react";
import { Link, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { logout } from "../../actions/auth";
import { login } from "../../actions/auth";
const Navbar = ({ auth: { isAuthenticated, loading }, login, logout }) => {
const [formData, setFormData] = useState({
email: "",
password: ""
});
const { email, password } = formData;
const onChange = e =>
setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = async e => {
e.preventDefault();
login(email, password);
};
if (isAuthenticated) {
return <Redirect to="/dashboard" />;
}
const authLinks = (
<ul>
<li>
<Link to="/dashboard">
<i className="fas fa-user" /> <span className="hide-sm">Dashboard</span>
</Link>
</li>
<li>
<a onClick={logout} href="#!">
<i className="fas fa-sign-out-alt" />{" "}
<span className="hide-sm">Log out</span>
</a>
</li>
</ul>
);
const guestLinks = (
<form
className="form-inline my-2 my-lg-0 navbar-login"
onSubmit={e => onSubmit(e)}
>
<div className="form-group">
<input
className="form-control mr-sm-2"
type="email"
placeholder="Email Address"
name="email"
value={email}
onChange={e => onChange(e)}
/>
</div>
<div className="form-group">
<input
className="form-control mr-sm-2 my-sm-0"
type="password"
placeholder="Password"
name="password"
value={password}
onChange={e => onChange(e)}
/>
</div>
<input type="submit" className="btn btn-primary" value="Login" />
</form>
);
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<h1>
<Link className="navbar-brand" to="/">
<i className="fas fa-crown"></i>
<br />
nawdic
</Link>
</h1>
{!loading && (
<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
)}
</nav>
);
};
Navbar.propTypes = {
logout: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
login: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool
};
const mapStateToProps = state => ({
auth: state.auth,
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { login, logout })(Navbar);

Answer 1

When user is logged in Navbar returns redirect component which is not the navbar itself
if (isAuthenticated) {
return <Redirect to="/dashboard" />;
}
Since isAuthenticated is passed to Navbar it shouldn't be responsible for redirecting in this case.
Try to move the Redirect thing to router as a best practice