如何从MobX存储访问react-router-v4历史属性
有没有办法在你的MobX商店中创建一个动作，使用react路由器v4将你的应用推送到一个新的url，例如this.props.history.push...
我经常收到历史记录未定义的错误，但不确定如何从我的商店访问历史记录。
但是，从组件本身调用的历史推送确实可以工作。
非常感谢！(这快把我逼疯了。)
回答 3
Stack Overflow用户
发布于 2020-05-08 12:07:46
既然我偶然遇到了同样的问题，我将分享我的解决方案。我只需将RouterStore放到我的存储目录下的自己的文件中，然后如果我需要访问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'),
)Stack Overflow用户
发布于 2017-08-18 17:40:16
您可以使用mobx-react-router将react-router放在mobx存储中，然后通过在组件中注入它来使用它。
您还可以将路由器存储作为构造函数参数传递给需要它的其他存储。这样，您就可以在mobx存储中获得路由器历史记录实例。
Stack Overflow用户
发布于 2020-12-18 19:58:11
我想添加一个更简单的解决方案，不需要任何额外的库。
React路由器版本为5.2
在我的商店中，我用以下代码创建了一个HistoryStore.js：
import { createBrowserHistory } from 'history';
export class HistoryStore {
history = createBrowserHistory();
}然后，我在我的contexts.js文件中创建了它的一个实例，但您可以立即执行此操作。
export const history = new HistoryStore();之后，将其导入到index.js中，并将其作为history道具传递给Router。
就这样。现在，您可以将此存储导入到任何其他存储中并在那里使用它。当你在你的组件中使用useHistory钩子时，它会得到这个历史记录对象，所以你的历史记录是同步的。
https://stackoverflow.com/questions/45745063
复制相似问题
腾讯云开发者
