Reactjs 在登录和注销组件之间切换

我想在登录时切换到注销

我以如下所示的方式实现了它。但它只在我刷新页面时呈现。我希望这种情况发生在触发时，而不是硬刷新

import React from "react"; import logo from "../logo.svg"; 
import { isLogin, logout } from '../utils/utility'; 
import { useHistory } from "react-router-dom"; 
import useForceUpdate from 'use-force-update';

const Header = () => {
    let history = useHistory();
    const forceUpdate = useForceUpdate();
    return (
        <div>
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1 className="App-title">Mobile Store Management System</h1>
                <div>
                    { //Check if message failed
                        
                        isLogin()
                            ? <div> <h4 style={{ display: "inline" }}><button style={{ 'cursor': 'pointer', display: "inline" }}
                            onClick={(e) => {
                                logout();
                                forceUpdate();
                                history.push('/')                                
                                
                            }
                            }>Logout</button></h4> </div>
                            : <div> <h4 style={{ display: "inline" }}>
                            <button style={{ 'cursor': 'pointer', display: "inline" }}  
                            onClick={(e) => {
                                logout();
                                forceUpdate() ;
                                history.push('/');
                                
                            }}>Login</button></h4> </div>
                            }
                    
                    <h4 style={{ display: "inline" }}><button style={{ 'cursor': 'pointer', display: "inline" }} onClick={() => history.push('/register')} >Register</button></h4>
                </div>
            </header>
        </div>
    ) } export default Header;

从“React”导入React；从“./logo.svg”导入徽标；
从“../utils/utility”导入{isLogin，注销}；
从“react router dom”导入{useHistory}；
从“使用武力更新”导入useForceUpdate；
常量头=（）=>{
让历史=使用历史（）；
const forceUpdate=useForceUpdate（）；
返回(
移动商店管理系统
{//检查消息是否失败
isLogin（）
?   {
注销（）；
forceUpdate（）；
history.push（“/”）
}
}>注销
:  
{
注销（）；
forceUpdate（）；
历史推送（“/”）；
}}>登录
}
history.push（'/register'）}>register
)}导出默认头；

我还有一个AppRouter，它是从中生成的：

    import React from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import App from '../components/App';
import SignIn from '../components/SignIn'
import NotFoundPage from '../components/NotFoundPage';
import PrivateRoute from '../components/PrivateRoutes';
import PublicRoute from '../components/PublicRoute';
import Header from '../components/Header';
import Register from '../components/Register'
const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header />
            <Switch>
                <PublicRoute component={Register} path="/register" exact />
                <PublicRoute restricted={true} component={SignIn} path="/" exact />
                <PrivateRoute component={App} path="/Admin" exact />
                <Route component={NotFoundPage} />
            </Switch>
        </div>
    </BrowserRouter>
)
export default AppRouter;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“../components/App”导入应用程序；
从“../components/SignIn”导入登录
从“../components/NotFoundPage”导入NotFoundPage；
从“../components/PrivateRoutes”导入PrivateRoute；
从“../components/PublicRoute”导入PublicRoute；
从“../components/Header”导入标题；
从“../components/Register”导入寄存器
常量批准器=（）=>(
)
导出默认批准程序；

---

任何帮助都将非常感谢。在呈现页面之前，您需要将

isLogin

导出到

const

。例如

import React from "react"; import logo from "../logo.svg"; 
import { isLogin, logout } from '../utils/utility'; 
import { useHistory } from "react-router-dom"; 
import useForceUpdate from 'use-force-update';

const Header = () => {
    let history = useHistory();
    const forceUpdate = useForceUpdate();
    const login = isLogin();

    return (
        <div>
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1 className="App-title">Mobile Store Management System</h1>
                <div>
                    { // Check if message failed
                        login 
                        ? <div>
                              <h4 style={{ display: "inline" }}>
                                  <button
                                      style={{ 'cursor': 'pointer', display: "inline"}}
                                      onClick={(e) => {
                                          logout();
                                          forceUpdate();
                                          history.push('/')                                
                                      }}
                                  >Logout</button>
                              </h4>
                          </div>
                        : <div>
                              <h4 style={{ display: "inline" }}>
                                  <button
                                      style={{ 'cursor': 'pointer', display: "inline" }}  
                                      onClick={(e) => {
                                          logout();
                                          forceUpdate() ;
                                          history.push('/');
                                      }}
                                  >Login</button>
                              </h4>
                          </div>
                      }
                      <h4 style={{ display: "inline" }}>
                          <button
                              style={{ 'cursor': 'pointer', display: "inline" }}
                              onClick={() => history.push('/register')}
                          >Register</button>
                      </h4>
                </div>
            </header>
        </div>
    )
}

export default Header;

从“React”导入React；从“./logo.svg”导入徽标；
从“../utils/utility”导入{isLogin，注销}；
从“react router dom”导入{useHistory}；
从“使用武力更新”导入useForceUpdate；
常量头=（）=>{
让历史=使用历史（）；
const forceUpdate=useForceUpdate（）；
const login=isLogin（）；
返回(
移动商店管理系统
{//检查消息是否失败
登录
? 
{
注销（）；
forceUpdate（）；
history.push（“/”）
}}
>注销
: 
{
注销（）；
forceUpdate（）；
历史推送（“/”）；
}}
>登录
}
history.push（'/register'）}
>登记册
)
}
导出默认标题；

我认为没有任何东西会导致重新渲染，因为React的观点没有任何变化（至少从您共享的代码来看是如此）。也许可以尝试使用组件状态控制按钮状态，并在单击时更新该状态，而不是使用导入的函数。