reactjs - BrowserRouter与带有history.push()的路由器

我试图了解BrowserRouter(v5)软件包的Router和react-router-dom之间的区别，以及它对下面的示例有何区别。

该文件说:



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



资料来源:https://reacttraining.com/react-router/web/api/Router

据我了解，我应该为我的HTML5浏览器应用程序使用 BrowserRouter ，到目前为止，我一直在这样做。

history.push(...)示例:

我正在尝试在一个thunk中执行一个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';

最佳答案

BrowserRouter会忽略历史记录 Prop ，因为它会自动为您处理历史记录。如果您需要访问React组件之外的历史记录，那么使用Router应该没问题。

关于reactjs - BrowserRouter与带有history.push()的路由器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56707885/