Блог

Главная - Вопросы по программированию - Переключение между входом в систему и выходом из компонента React

Переключение между входом в систему и выходом из компонента React

#reactjs

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

Также у меня есть маршрутизатор, из которого он генерируется:

     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;

Любая помощь была бы большой благодарностью заранее.

Комментарии:

1. Я не думаю, что что-то вызывает повторный рендеринг, поскольку с точки зрения React ничего не меняется (по крайней мере, из кода, которым вы поделились). Возможно, попробуйте управлять состоянием кнопки с помощью состояния компонента и обновлять его по щелчку вместо импортированной функции.

Ответ №1:

Перед отображением страницы вам необходимо экспортировать ее isLogin в a 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;