React中的注销按钮

当我连接到我的网站时，我在导航栏中看不到注销按钮，尽管当我连接到网站时，我的状态是200.当我在网站上唱歌时，同样的事情也发生了.我能做些什么来修复它？谢谢你的帮助

注销页面:

import { logout } from "../services/userService";

const Logout = () => logout();

export default Logout;

uesrService:

import http from "./httpService";
import JWTDecode from "jwt-decode";

export const signup = (user) =>
  http.post(`http://localhost:8181/api/users/register`, user);

export const login = async (user) => {
  const {
    data: { token },
  } = await http.post(`http://localhost:8181/api/users/login`, user);
  localStorage.setItem("token", token);
};

export const getCurrentUser = () => {
  try {
    const token = localStorage.getItem("token");
    return JWTDecode(token);
  } catch {
    return null;
  }
};

export const logout = () => {
  localStorage.removeItem("token");
  return (window.location = "/");
};

export const getJWT = () => localStorage.getItem("token");

httpService:

axios.interceptors.request.use(
  data => {
    axios.defaults.headers.common["x-auth-token"] = getJWT();
    return Promise.resolve(data);
  },
  error => {
    const expectedError = error.response && error.response.status >= 400;
    if (expectedError) toast.error(`An error occurred: ${error.message}`);
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(null, error => {
  const expectedError = error.response && error.response.status >= 400;
  if (expectedError) toast.error(`An error occurred: ${error.message}`);
  return Promise.reject(error);
});

const http = {
  get: axios.get,
  post: axios.post,
  put: axios.put,
  patch: axios.patch,
  delete: axios.delete,
};

export default http;

导航页面:

import React from "react";
import RightNavigation from "./RightNavigation";

const Navigation = ({ user }) => (
  <div
    className="collapse navbar-collapse justify-content-between"
    id="navbarSupportedContent"
  >
    <RightNavigation user={user} />
  </div>
);

export default Navigation;

RightNevigation:
import React from "react";
import { ROUTES } from "../../../model/routes";
import NavRouteLink from "../../common/Navigation/NavRouteLink";

const RightNavigation = ({ user }) => {
  return (
    <ul className="navbar-nav">
      {!user && (
        <>
          <NavRouteLink route={ROUTES.LOGIN} />
          <NavRouteLink route={ROUTES.SIGNUP} />
        </>
      )}

      {user && <NavRouteLink route={ROUTES.LOGOUT} />}
    </ul>
  );
};

export default RightNavigation;

路由器页面:

const ROUTES = {
  ROOT: "ROOT",
  ABOUT: "ABOUT",
  LOGOUT: "LOGOUT",
  LOGIN: "LOGIN",
  SIGNUP: "SIGNUP",
  GALLERY: "GALLERY",
};
const ROUTES_DEF = {
  [ROUTES.ROOT]: { to: "/", label: "HomePage" },
  [ROUTES.ABOUT]: { to: "/about", label: "About" },
  [ROUTES.LOGOUT]: { to: "/logout", label: "Logout" },
  [ROUTES.LOGIN]: { to: "/login", label: "Login" },
  [ROUTES.SIGNUP]: { to: "/signup", label: "Signup" },
  [ROUTES.GALLERY]: { to: "/gallery", label: "Gallery" },
};

export { ROUTES_DEF, ROUTES };

导航路线:

import React from "react";
import { NavLink } from "react-router-dom";
import * as PropTypes from "prop-types";
import { ROUTES_DEF } from "../../model/routers";

const NavRouteLink = ({ route }) => {
  const { to, label } = ROUTES_DEF[route];
  return (
    <li className="nav-item">
      <NavLink className="nav-link" to={to}>
        {label}
      </NavLink>
    </li>
  );
};

NavRouteLink.propTypes = {
  route: PropTypes.string.isRequired,
};

export default NavRouteLink;