web-dev-qa-db-fra.com

BrowserRouter vs Router avec history.Push ()

J'essaie de comprendre la différence entre BrowserRouter et Router du package react-router-dom (V5) et quelle différence cela fait pour mon exemple ci-dessous.

La documentation dit:

BrowserRouter A qui utilise l'API d'historique HTML5 (pushState, replaceState et l'événement popstate) pour garder votre interface utilisateur en synchronisation avec l'URL.

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

Routeur L'interface commune de bas niveau pour tous les composants du routeur. En règle générale, les applications utilisent plutôt l'un des routeurs de haut niveau: BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter

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

D'après ce que je comprends, je devrais utiliser BrowserRouter pour mes applications de navigateur HTML5 et je l'ai fait jusqu'à présent.

history.Push (...) exemple:

J'essaie d'exécuter une history.Push('/myNewRoute') dans un thunk:

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 est défini comme ce module:

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

et le history est également transmis à mon routeur:

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

...

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

Problème: history.Push() mettra à jour l'URL dans la barre du navigateur mais ne rendra pas le composant derrière la route.

Si j'importe Router au lieu de BrowserRouter, cela fonctionne:

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

// Does work:
import { Router } from 'react-router-dom';
reactjsreact-routerreact-router-domhtml5-historyreact-thunk
16
mitchkman

BrowserRouter ignore l'accessoire d'historique car il gère automatiquement l'historique pour vous. Si vous avez besoin d'accéder à l'historique en dehors d'un composant React, l'utilisation de Router devrait suffire.

16
Juanso87

Vous pouvez accéder à l'historique via le hook useHistory let history = useHistory(); pour exécuter history.Push() pour BrowserRouter.

En regardant la documentation de l'API Historique HTML5 , il semble que l'API historique préserve automatiquement l'état de l'utilisateur. Supposons que vous vous trouviez initialement à la page 1 et que la page 1 comporte une page Outlook A. Vous avez effectué certaines actions qui modifient Outlook de la page 1 en B. Si vous passez maintenant à la page 2, lorsque vous cliquez sur le bouton Précédent du navigateur, vous serez retournez directement à la page 1. L'historique API préserve votre état pour qu'il sache vous rendre Outlook B, ce qui est l'avantage d'utiliser BrowserRouter. Bien que je ne sois pas sûr à 100%, je suppose que Browser ne vient pas avec cette fonctionnalité et dans ce cas, il rendra Outlook A lorsque vous serez redirigé vers la page 1. Ce n'est pas vrai. Je ne suis pas sûr de la différence.

0
Xitang