BrowserRouter против маршрутизатора с history.push () - PullRequest
Новая
       93

BrowserRouter против маршрутизатора с history.push ()

0 голосов
/ 21 июня 2019

Я пытаюсь понять разницу между BrowserRouter и Router пакета react-router-dom (v5) и чем это отличается для моего примера ниже.

В документации написано:

BrowserRouter A, использующий API истории HTML5 (pushState, replaceState и popstate) для синхронизации вашего пользовательского интерфейса с URL.

Источник:https://reacttraining.com/react-router/web/api/BrowserRouter

Маршрутизатор Общий низкоуровневый интерфейс для всех компонентов маршрутизатора.Обычно приложения используют вместо этого один из высокоуровневых маршрутизаторов: BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter

Источник: https://reacttraining.com/react-router/web/api/Router

Из того, что я понимаю, я должениспользовать BrowserRouter для моих браузерных приложений HTML5, и я делал это до сих пор.

history.push (...) пример:

Я пытаюсь выполнить history.push('/myNewRoute') в толпе: 

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 определяется как этот модуль: 

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

и history также передается вМой маршрутизатор: 

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

...

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

Проблема: history.push() обновит URL в панели браузера, но не отобразит компонент за маршрутом.

Если я импортирую Router вместо BrowserRouter, работает: 

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

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

1 Ответ

0 голосов
/ 26 июня 2019

BrowserRouter игнорирует реквизит истории, поскольку он обрабатывает историю автоматически для вас.Если вам нужен доступ к истории за пределами реактивного компонента, тогда лучше использовать Router.

...