Menu.js

import React, { useState, useEffect } from 'react';
import { Link, Redirect } from 'react-router-dom';
import styled from 'styled-components';
import { Navbar, Nav, NavDropdown, NavLink } from 'react-bootstrap';

const MENU = styled(Navbar)`
    background-color: #7B031D;

    a {
        color : white;
    }
`

function Menu() {
    const [state, setState] = useState()
    const name = localStorage.getItem('name');

    function logout() {
        localStorage.clear();
        alert("로그아웃 되었습니다.");
        setState(true);
    }

    if (state) return <Redirect to="/" />
    return (
        <MENU expand="md" variant="dark">
            <Navbar.Brand href="#">대관 서비스</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <NavLink as={Link} to="/notice">공지사항</NavLink>
                    <NavLink as={Link} to="/home">대관 현황</NavLink>

                    <NavLink as={Link} to={{
                        pathname: `/apply/${localStorage.getItem('_id')}`,
                        state: { id: localStorage.getItem('_id') },
                    }} className="nav-link">대관 신청</NavLink>

                    <NavLink as={Link} to={{
                        pathname: `/check/${localStorage.getItem('_id')}`,
                        state: { id: localStorage.getItem('_id') },
                    }} className="nav-link">
                        대관 확인/취소</NavLink>

                    <NavLink as={Link} to={{
                        pathname: `/acheck/${localStorage.getItem('_id')}`,
                        state: { id: localStorage.getItem('_id') },
                    }} className="nav-link">
                        대관 확인/취소(관리자)</NavLink>
                </Nav>
                <Nav >
                    <NavLink>
                        <small className="d-flex flex-row justify-content-end">
                            <div className="text-white text-right font-weight-light pr-2">{name}님</div>
                            <NavLink className="p-0" as={Link} to={{
                                pathname: `/change/${localStorage.getItem('_id')}`,
                                state: { id: localStorage.getItem('_id') },
                            }}>  비밀번호 변경 </NavLink> / <NavLink className="p-0" onClick={logout} > 로그아웃</NavLink></small>
                    </NavLink>
                </Nav>
            </Navbar.Collapse>
        </MENU >
    )
}

export default Menu