webentwicklung-frage-antwort-db.com.de

BrowserRouter vs Router mit history.Push ()

Ich versuche, den Unterschied zwischen BrowserRouter und Router des Pakets react-router-dom (V5) zu verstehen und welchen Unterschied es für mein Beispiel unten macht.

Die Dokumentation sagt:

BrowserRouter A, der die HTML5-Verlaufs-API (pushState, replaceState und das Popstate-Ereignis) verwendet, um Ihre Benutzeroberfläche mit der URL synchron zu halten.

Quelle: https://reacttraining.com/react-router/web/api/BrowserRouter

Router Die gemeinsame Low-Level-Schnittstelle für alle Routerkomponenten. In der Regel verwenden Apps stattdessen einen der übergeordneten Router: BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter

Quelle: https://reacttraining.com/react-router/web/api/Router

Soweit ich weiß, sollte ich BrowserRouter für meine HTML5-Browser-Apps verwenden, und das habe ich bisher getan.

history.Push (...) Beispiel:

Ich versuche, eine history.Push('/myNewRoute') innerhalb eines Thunks auszuführen:

import history as './history';

...

export function someAsyncAction(input) {
  return dispatch => {
    fetch(`${API_URL}/someUrl`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ input }),
    }).then(() => {
      history.Push('/myNewRoute');
    }).catch((err) => {
      dispatch(setError(err));
    })
  };
};

history ist wie folgt definiert:

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

und das history wird auch an meinen Router übergeben:

import { BrowserRouter as Router } from 'react-router-dom';
import history as './history';

...

const App = () => (
  <Router history={history}>
     ...
  </Router>
);

Problem: history.Push() aktualisiert die URL in der Browserleiste, rendert jedoch nicht die Komponente hinter der Route.

Wenn ich Router anstelle von BrowserRouter importiere, funktioniert es:

// Does not work:
import { BrowserRouter as Router } from 'react-router-dom';

// Does work:
import { Router } from 'react-router-dom';
16
mitchkman

BrowserRouter ignoriert die Verlaufs-Requisite, da sie den Verlauf automatisch für Sie verarbeitet. Wenn Sie außerhalb einer Reaktionskomponente Zugriff auf den Verlauf benötigen, sollte die Verwendung von Router in Ordnung sein.

16
Juanso87

Sie können über den useHistory-Hook let history = useHistory(); auf den Verlauf zugreifen, um history.Push() für BrowserRouter auszuführen.

Wenn Sie sich HTML5 History API-Dokumentation ansehen, scheint es, dass die History-API den Status für den Benutzer automatisch beibehält. Angenommen, Sie befinden sich anfangs auf Seite 1 und Seite 1 enthält eine Seite Outlook A. Sie haben einige Aktionen ausgeführt, mit denen die Seite 1 Outlook in B geändert wird. Wenn Sie jetzt zu Seite 2 wechseln und im Browser auf die Schaltfläche Zurück klicken, werden Sie dies tun Direkt zurück zu Seite 1. Die Verlaufs-API überprüft Ihren Status, damit Outlook B für Sie gerendert werden kann. Dies ist der Vorteil der Verwendung von BrowserRouter. Obwohl ich nicht 100% sicher bin, wird Browser vermutlich nicht mit dieser Funktionalität geliefert. In diesem Fall wird Outlook A gerendert, wenn Sie zurück zu Seite 1 geleitet werden. Das ist nicht wahr. Ich bin mir über den Unterschied nicht sicher.

0
Xitang