BrowserRouter与带有history.push（）的路由器

Question

我试图了解（v5）包和之间的区别，BrowserRouter以及Router对react-router-dom下面的示例有什么区别。

该文件说：

BrowserRouter A，使用HTML5历史记录API（pushState，replaceState和popstate事件）使UI与URL保持同步。

来源：https : //reacttraining.com/react-router/web/api/BrowserRouter

路由器 所有路由器组件的通用底层接口。通常，应用将使用高级路由器之一代替：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';

Answer 1

BrowserRouter忽略历史记录道具，因为它会自动为您处理历史记录。如果您需要访问React组件之外的历史记录，则可以使用Router。

Answer 2

您可以通过 useHistory 钩子访问历史记录来为 BrowserRouterlet history = useHistory();执行history.push()。

查看HTML5 History API 文档，似乎 history API 会自动为用户保留状态。假设您最初在第 1 页，并且第 1 页有一个页面外观 A。您执行了一些将第 1 页外观更改为 B 的操作。如果您现在移动到第 2 页，当您单击浏览器上的后退按钮时，您将直接返回第 1 页。历史 API 会保留您的状态，因此它知道将 Outlook B 呈现给您，这就是使用BrowserRouter. 虽然我不是 100% 肯定，但我想Browser没有这个功能，在这种情况下，当你被引导回第 1 页时，它会呈现 Outlook A。这不是真的。我不确定其中的区别。