javascript - React Router 4 与 Mobx 重新初始化组件

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 中查看此组件，您将看到这些组件完全消失。

这是预期的行为，您应该在设计组件层次结构时考虑到这一点。例如，如果您想在路由更改期间维护应用程序状态，请将上面的状态存储移动到其实例不受路由器管理的组件，并将其作为 prop 向下传递。