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

有没有办法在你的MobX商店中创建一个动作，使用react router v4将你的应用程序推送到一个新的url，例如，this.props.history.push

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

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

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

您可以将react路由器放在mobx存储中，然后通过将其注入组件来使用它

---

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

既然我偶然发现了同样的问题，我将分享我的解决方案。我只是将

RouterStore

放在我的stores目录中它自己的文件中，然后如果我需要访问

history

或

location

或其他任何内容，我会将路由存储导入我当前工作的存储中

/stores/routing.ts

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

export default new RouterStore()

import routing from './routing'

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

export default new OtherStore()

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'),
)

/stores/other store.ts

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

export default new RouterStore()

import routing from './routing'

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

export default new OtherStore()

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'),
)

/index.ts

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

export default new RouterStore()

import routing from './routing'

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

export default new OtherStore()

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'),
)

从'react Router dom'导入{Router}
从“mobx react”导入{Provider}
从“历史记录/createBrowserHistory”导入createBrowserHistory
从“mobx react router”导入{syncHistoryWithStore}
从“./stores/other store”导入otherStore
从“./stores/routing”导入路由
const browserHistory=createBrowserHistory（）
常数存储={
其他商店，
路由，
}
const history=syncHistoryWithStore（浏览器历史记录，路由）
ReactDOM.render(
,
document.getElementById（'root'），
)

我想添加一个更简单的解决方案，它不需要任何额外的库
React路由器版本为5.2

在我的商店中，我用以下代码创建了一个

HistoryStore.js

：

import { createBrowserHistory } from 'history';

export class HistoryStore {
    history = createBrowserHistory();
}

然后我在

contexts.js

文件中创建了它的一个实例，但您可以立即执行

export const history =  new HistoryStore();

然后将其导入到

index.js

中，并将其作为

历史

道具传递到

路由器

就这样。现在，您可以将此存储导入任何其他存储并在其中使用它。当您在组件中使用

useHistory

hook时，它会获取这个历史对象，因此您的历史记录是同步的