Question

有没有办法在您的MobX商店中创建一个操作，该操作会使用反应路由器v4将您的应用推送到新的网址，例如： this.props.history.push ...

我经常收到历史未定义的错误，但我不确定如何从我的商店访问历史记录。

从组件本身调用的历史推送确实有效..

非常感谢！（这让我发疯了......）

Answer 1

由于我偶然发现了同一问题，因此我将分享我的解决方案。我只是将RouterStore放在自己的store目录中的文件中，然后，如果我需要访问history或location或其他任何东西，我会将路由存储导入到我当前所在的存储中工作。

./stores/routing.ts

import { RouterStore } from 'mobx-react-router'

export default new RouterStore()

./stores/other-store.ts

import routing from './routing'

export class OtherStore {
  @action
  doSomething = () => {
    routing.push('/new-route')
  }
}

export default new OtherStore()

./index.ts

import { Router } from 'react-router-dom'
import { Provider } from 'mobx-react'
import createBrowserHistory from 'history/createBrowserHistory'
import { syncHistoryWithStore } from 'mobx-react-router'

import otherStore from './stores/other-store'
import routing from './stores/routing'

const browserHistory = createBrowserHistory()

const stores = {
  otherStore,
  routing,
}

const history = syncHistoryWithStore(browserHistory, routing)

ReactDOM.render(
  <Provider {...stores}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root'),
)

Answer 2

您可以使用mobx-react-router将react-router放入mobx商店，然后通过将其注入组件来使用它。

您还可以将路由器存储作为构造函数参数传递给需要它的其他商店。这样您就可以在mobx商店中使用路由器历史记录实例。

Answer 3

我想添加一个不需要任何其他库的简单解决方案。
反应路由器的版本是5.2

在我的商店中，我使用以下代码创建了* * * * * cd /path-to-your-project && php artisan schedule:run >> /dev/null 2>&1：

HistoryStore.js

然后，我在import { createBrowserHistory } from 'history'; export class HistoryStore { history = createBrowserHistory(); }文件中创建它的实例，但是您可以立即执行。

contexts.js

之后，将其导入export const history = new HistoryStore();中，并将其作为index.js道具传递给history。

就是这样。现在，您可以将该商店导入其他任何商店，并在那里使用它。当您在组件中使用Router钩子时，它将获取此历史记录对象，因此您的历史记录将保持同步。

如何从MobX商店访问react-router-v4历史道具

3 个答案: