Question

我正在使用带有mobx的React Router v4，并且遇到了一个非常烦人的错误。这是我的index.js

const history = createHashHistory();
render(
        <Provider history={history} {...stores}>
            <Router history={history}>
                <Application />
            </Router>
        </Provider>, document.getElementById('root')
)

内部应用程序中，我有一个带有导航链接的菜单组件和一个主体，其中有一个开关

<Switch>
    <Route path='/somecomponent/' exact={true} component={SomeComponent} />
    { other routes>}
</Switch>

Application和Body都用@withRouter装饰，因此路由工作正常，但是每次我导航到“ / somecomponent”时，都会创建一个新的SomeComponent实例。这是SomeComponent的构造函数：

class SomeComponent extends React.Component {
    constructor(props){
        super(props);
        this.store = new SomeComponentStore();
        console.log('reinitialising')
    }

是的，每次我走那条路线时console.log都会运行，并且还会创建一个新商店（这是我最初注意到问题的方式）。 Switch内的所有其他组件的行为均相同。有人可以向我解释是什么导致了问题以及如何解决该问题？

Answer 1

React Router组件处于非活动状态时（即路由不匹配），它们不会呈现单个路由，这会导致它们被卸载并破坏实例。当它们再次处于活动状态时，需要对其进行重建。如果在React Devtools中查看该组件，您将看到这些组件完全消失。

这是预期的行为，您应该牢记这一点来设计组件层次结构。例如，如果您想通过路由更改来维护应用程序状态，则将状态存储移到其实例不受路由器管理的组件上方，然后将其作为道具传递下来。

使用Mobx的React Router 4重新初始化组件

1 个答案: