我应该为createBrowserHistory创建一个单独的history.js吗？

Question

环顾四周似乎是在一个单独的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中导入该文件

Answer 1

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