Reactjs 我必须在React中将登录添加到导航栏

我必须将登录系统添加到navbar，但当我在任何地方登录时，navbar都不会出现。我怎样才能解决它

导航栏显示正常，无登录系统

导航栏在App.js上

authLinks-仅针对经过身份验证的用户的部分（仪表板和注销按钮）

GuestLink-仅针对未经身份验证的用户的部分（此处的登录表单）

我的导航栏+登录：

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

import React，{Fragment，useState}来自“React”；
从“react router dom”导入{Link，Redirect}；
从“react redux”导入{connect}；
从“道具类型”导入道具类型；
从“../../actions/auth”导入{logout}；
从“../../actions/auth”导入{login}；
const Navbar=（{auth:{isAuthenticated，loading}，login，logout}）=>{
常量[formData，setFormData]=useState({
电邮：“，
密码：“
});
const{email，password}=formData；
const onChange=e=>
setFormData（{…formData，[e.target.name]：e.target.value}）；
const onSubmit=async e=>{
e、 预防默认值（）；
登录（电子邮件、密码）；
};
如果（未经验证）{
返回；
}
常量authLinks=(


仪表板




);
const guestLinks=(
onSubmit（e）}
>
onChange（e）}
/>
onChange（e）}
/>
);
返回(


粗俗的
{！正在加载&&(
{isAuthenticated？authLinks:guestLinks}
)}
);
};
Navbar.propTypes={
注销：需要PropTypes.func.isRequired，
auth:PropTypes.object.isRequired，
登录名：PropTypes.func.isRequired，
IsAuthentication:PropTypes.bool
};
常量mapStateToProps=状态=>({
auth:state.auth，
isAuthenticated:state.auth.isAuthenticated
});
导出默认连接（mapstatetops，{login，logout}）（导航栏）；

当用户登录导航栏时，返回的重定向组件不是导航栏本身

if (isAuthenticated) {
  return <Redirect to="/dashboard" />;
}

if（已验证）{
返回；
}

因为isAuthenticated被传递给Navbar，所以在这种情况下它不应该负责重定向。 作为最佳实践，尝试将重定向内容移动到路由器