首页 > 解决方案 > 我应该为 createBrowserHistory 提供一个单独的 history.js 吗?

问题描述

环顾四周的人似乎createBrowserHistory在一个单独的history.js文件中使用,我很好奇为此创建一个单独的文件的确切原因是什么。

我想做什么

import { createBrowserHistory } from 'history';

class MySpecialComponent extends Component {
  constructor() {
    super();

    this.history = createBrowserHistory();
  }
}

<Router history={this.history}>
  <div>
    <Route
      path="/"
      render={() => <RootComponent />}
      exact
    />
    <Route path="/confirm" render={() => <ConfirmComponent />} />
  </div>
</Router>

将它放在构造函数中是不是一种不好的方法,我应该单独制作一个history.js包含以下内容的内容:

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

并将该文件导入MySpecialComponent

标签: reactjsreact-routerreact-router-v4browser-historyreact-router-dom

解决方案


我单独创建一个history对象而不使用它的唯一原因BrowserRouter是如果我想做history.push或者history.replace在我无法访问路由器道具的某个地方。现在,如果我将历史记录创建为组件的属性,则无法将该history对象导入其他文件中。所以我做了一个单独的history.js,然后我可以在我的应用程序中任何我想要的地方导入该历史记录并使用它。


推荐阅读