web-dev-qa-db-ja.com

browserRouter対router with history.Push（）

_react-router-dom_（v5）パッケージのBrowserRouterとRouterの違いと、以下の私の例でどのような違いがあるかを理解しようとしています。

ドキュメントは言う：

BrowserRouterHTML5履歴API（pushState、replaceState、popstateイベント）を使用して、UIとURLの同期を維持するA。

ソース： https://reacttraining.com/react-router/web/api/BrowserRouter

Routerすべてのルーターコンポーネントに共通の低レベルインターフェイス。通常、アプリは代わりに上位ルーターの1つを使用します：BrowserRouter、HashRouter、MemoryRouter、NativeRouter、StaticRouter

ソース： https://reacttraining.com/react-router/web/api/Router

私が理解していることから、私はHTML5ブラウザーアプリにBrowserRouterを使用する必要があり、これまでこれを行ってきました。

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';
_
reactjsreact-routerreact-router-domhtml5-historyreact-thunk
16
mitchkman

BrowserRouterは自動的に履歴を処理するため、履歴プロップを無視します。反応コンポーネントの外で履歴にアクセスする必要がある場合は、Routerを使用すると問題ありません。

16
Juanso87

UseHistoryフックlet history = useHistory();を使用して履歴にアクセスし、BrowserRouterに対してhistory.Push()を実行できます。

HTML5 History APIドキュメント を見ると、履歴APIはユーザーの状態を自動的に保存しているようです。最初にページ1にいて、ページ1にページOutlook Aがあるとします。ページ1のOutlookをBに変更するいくつかのアクションを実行しました。ここでページ2に移動した場合、ブラウザーの戻るボタンをクリックすると、次のようになります。直接ページ1に戻ります。HistoryAPIは、Outlook Bをレンダリングすることを認識できるように状態をpreseedします。これがBrowserRouterを使用する利点です。 100％確実ではありませんが、Browserにはこの機能が含まれていないと思います。その場合、1ページに戻ったときにOutlook Aが表示されます。 本当じゃない。違いはわかりません。

0
Xitang