Comment rediriger vers la page de connexion après avoir cliqué sur le bouton de déconnexion sur l'en-tête de la barre de navigation dans React?

Vous évoquez ici deux approches. Vous pouvez utiliser le composant d'ordre supérieur 'withRouter' qui permet aux composants d'accéder au objet d'histoire. En utilisant l'objet history qui serait transmis à votre composant comme accessoire, vous pouvez pousser vers l'itinéraire que vous voulez.

Personnellement, j'aime configurer mes liens de déconnexion pour rendre un composant qui héberge la logique de déconnexion et rend une redirection vers la connexion une fois qu'elle est terminée. De cette façon, les utilisateurs peuvent accéder directement au lien de déconnexion s'ils le souhaitent, et vous pouvez y créer un lien depuis n'importe où dans votre application, selon vos besoins, sans avoir à dupliquer la logique.

Dans le routeur de votre navigateur, vous peut ajouter un chemin pour "/ logout" qui rend un composant comme celui-ci (basé sur votre logique):

import React, { Component } from 'react';
import { Redirect } from 'react-router';

export default class LogOut extends Component {
    state = {
        redirect: false,
    };

    componentDidMount() {
        sessionStorage.setItem("userToken", '');
        sessionStorage.clear();
        this.setState({ redirect: true });
    }

    render() {
        return this.state.redirect ?
            <Redirect to={'/sign-in'} /> :
            null;
    }
}

Normalement, je ferais une requête ajax pour effacer une session, puis setState une fois que c'est terminé, mais le vôtre est entièrement côté serveur.

Les composants liés à Routes ont accès à l'objet d'historique comme accessoire afin que vous puissiez le muter selon vos besoins, par exemple en vous déconnectant. Puisque votre composant d'en-tête n'a pas accès à l'objet d'historique, vous devrez utiliser un routeur de niveau inférieur pour lui donner accès à l'objet d'historique:

import { Router } from "react-router"
import { createBrowserHistory } from "history"

const history = createBrowserHistory()

<Router history={history}>
  <div className="App">
      <Header history={history} />
      <Switch>
        <Route exact path="/" component={Home}>
        </Route>
        <Route exact path="/management" component={Management}>
        </Route>
        <Route exact path="/sign-up" component={SignUpForm}>
        </Route>
        <Route exact path="/sign-in" component={SignInForm}>
        </Route>
        <Route component={Error}>
        </Route>
      </Switch>
    </div>
</Router>

maintenant à l'intérieur de votre composant d'en-tête, vous pouvez appelez history.push('/login')

voir référence: https://reacttraining.com/react-router/web/api/Router/history-object

Vous pouvez implémenter la connexion / déconnexion avec route en utilisant HOC qui vérifie l'élément de session à chaque changement de route. Si la session a userToken , elle sera redirigée vers un composant donné, sinon elle sera redirigée vers le composant de connexion.

class Header extends Component {

....

logout = () => {
    sessionStorage.removeItem("userToken");
    sessionStorage.clear(); 
}

render() {
    return (
        <div>
          ...
          <button type='button' onClick={this.logout}>Log Out</button>
        </div>
    )
}
}
export default Header;

importez et utilisez comme chemin autorisé. Et conservez tous les autres chemins comme des itinéraires normaux dans lesquels vous ne voulez pas d'autorisation.

<BrowserRouter>
    <div className="App">
        <Header />
        <Switch>
            <PrivateRoute path="/" component={Home} />
            <PrivateRoute path="/management" component={Management} />
            <Route path="/sign-up" component={SignUpForm} />
            <Route path="/sign-in" component={SignInForm} />
            <Route component={Error} />
        </Switch>
    </div>
</BrowserRouter >

Ainsi, pendant que vous vous déconnectez, l'élément de session sera supprimé et automatiquement redirigé vers page de connexion.

import React from "react"
import {Redirect} from "react-router-dom"

export const PrivateRoute = ({component: Component, ...rest}) => (
    <Route {...rest} render={(props) => (
        sessionStorage.getItem('userToken') ? <Component {...props} /> : <Redirect to="/sign-in"/>
    )} />
)