reactJS历史确实推送了，但导航栏确实改变了

它可以将history.push推到并更改/主页登录后导航栏菜单会更改

但我无法在注销后更改导航栏菜单，即使它确实显示了history.push to和display/signin页面

我做错了什么？非常感谢，非常感谢

//BootstrapNavbar

import {Link,useHistory} from "react-router-dom";
import {useContext,useState} from 'react'
import {UserContext} from './userContext'

const BootstrapNavbar = () => {
    const userDataContext = useContext(UserContext)
    const history = useHistory()   
    const lsData =JSON.parse(localStorage.getItem("userData"))
    userDataContext.setDisplayName(lsData ? lsData.user.displayname : "")
    const renderList =()=>{    
           
         if(lsData !== null){
            return [
            <li >
               <Link  to="/home" >Home <span className="sr-only">(current)</span></Link>
            </li>,
             <li>
                <button  onClick={()=>{localStorage.removeItem('userData')
                history.push('/signin')
                }} style={{color:"white"}}>Sign out</button>
            </li>
            ]
        }
        else{
            return[
                
                <li >
                    <Link  to="/about" style={{color:"white"}}>About</Link>
                </li>,
                <li >
                    <Link to="/signin" style={{color:"white"}}>Sign-In</Link>
                </li>,
                <li>
                    <Link to="/signup" style={{color:"white"}}>Sign-Up</Link>
                </li>,
            ]

        }
    }

    return (
             <div>
                   <nav>
                        <a>Demo</a>
                        <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span/>
                        </button>
                        <div id="navbarSupportedContent">
                          <ul>
                            {renderList()}                        
                         </ul>                       
                        </div>
                        </nav>                    
                    <br />
                </div>
     
    )
}

---

我猜这是因为当您尝试使用

历史记录更改路由时，组件
BootstrapNavbar
没有重新渲染。按
。如果尝试更改路由，但组件仍然相同，则无法重新渲染。除此之外，您没有任何可能导致重新渲染的事件。我猜这是因为您的组件
BootstrapNavbar
在尝试使用
历史记录更改路由时没有重新渲染。按
。如果尝试更改路由，但组件仍然相同，则无法重新渲染。除此之外，您没有任何可能导致重新渲染的事件
 const Signin = async() => {
        const response = await Axios.post('http://localhost:5000/api/auth/login', loginData,{withCredentials:true})
        if(response.data.statusCode == 200) {
            localStorage.setItem('userData',JSON.stringify(response.data))
            history.push('/home')
          }
            else{
                setMessage(response.data.msg)
            }  
    }