Zugriff auf History-Objekt außerhalb einer React Component

Question

Zunächst bin ich ziemlich vertraut mit der withRouter HoC, aber in diesem Fall hilft es nicht, weil ich nicht auf das Objekt history in einer Komponente zugreifen möchte .

Ich versuche, einen Mechanismus zu erreichen, der den Benutzer auf die Anmeldeseite umleiten wird, wenn ich eine 401 von einem API-Endpunkt zurückbekomme. Um http-Anfragen zu stellen, verwende ich axios. Ich habe ungefähr 60 Endpunkte, die ich abdecken muss, die in einem Dutzend Komponenten in meiner App verwendet werden.

Ich mag eine Dekorateur Funktion des axios Instanz-Objekt erstellen, dass:

1. makes the request 
2. if fail && error_code = 401, update user route to `/login` 
3. if success, return promise 

Das Problem, das ich mit der oben habe, ist die Route des Benutzers zu aktualisieren. Zuvor konnte ich in react-router-v3 das browserHistory Objekt direkt aus dem React-Router-Paket importiert haben, was nicht mehr möglich ist.

Meine Frage ist also, wie kann ich auf das History-Objekt außerhalb der React-Komponente zugreifen, ohne es über den Call-Stack zu übergeben?

Answer 1

react-router v4 bietet auch eine Möglichkeit, Geschichte über das history Paket zu teilen, nämlich createBrowserHistory() Funktion.

Der wichtige Teil besteht darin, sicherzustellen, dass das gleiche Verlaufsobjekt in Ihrer App geteilt wird. Dazu können Sie die Tatsache nutzen, dass Knotenmodule Singletons sind.

Erstellen Sie eine Datei history.js in Ihrem Projekt, mit folgendem Inhalt:

import createBrowserHistory from 'history/createBrowserHistory'; 

const history = createBrowserHistory(); 
export default history; 

Anschließend können Sie importieren es einfach in der Anwendung über:

import history from "./history.js"; 

Bitte beachten Sie, dass nur Router die akzeptiert history Prop (BrowserRouter nicht), so stellen Sie sicher, Ihren Router JSX entsprechend zu aktualisieren:

Ein Arbeitsbeispiel kann bei https://codesandbox.io/s/owQ8Wrk3