在react-router中使用mobx的正确芝士~

龙井茶奇遇

于 2020-11-20 15:12:34 发布

阅读量1.1k

点赞数

分类专栏：入门文章标签： react

本文链接：https://blog.csdn.net/qq_42248955/article/details/109849881

版权

本文介绍了在React应用中使用React Router时，如何正确地结合MobX进行状态管理。错误示例提及了尝试在router下直接使用provide导致的MobX Store不可用问题。解决方法是利用Provider组件，通过React的context机制向下传递MobX stores，确保state能被子组件正确获取。此文章作为使用心得记录下来。

摘要由CSDN通过智能技术生成

一开始傻傻地在router下面使用provide，

class App extends Component {
    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        <Route exact path="/" > <Home /></Route>
                        <Route path="/cart" >  <Cart /></Route>
                        <Route path="/my" ><My /></Route>
                    </Switch>
                </Router>
                <Provider cartStore={cartStore}>
                    <Cart />
                </Provider>
            </div>
        )
    }
}

当然会报错：