如何使用Mobservable，React和可能的React-Router进行URL /视图路由？

Question

我正在调查mobservable但是我在设置一个好的模型来进行网址路由时遇到了一些麻烦。

由于mobservable如何使用标准react-router使用React，因此在更改网址时不会执行任何操作。只有当我们粗略地将url路径传递到Handler堆栈中以使它们成为反应时才能看到一些变化。

我觉得这需要一种不同的方法。当然我可以破解一些自定义的东西，但我有点像反应路由器嵌套网址和固定的位置/链接功能。

Answer 1

我正在使用一个同时使用mobservable和react-router的（非公共）项目。该设置基本如下：

1. 创建所有路由，但为它们提供所有相同的处理程序，即根组件。
2. 介绍存储您的ui状态的反应状态（例如，当前打开的文档）
3. 在router.run回调中，使用传入的数据（第二个参数）来更新你的ui状态并开始必要的数据检索等。在回调结束时，只需渲染您的处理程序。根据您对根组件的进一步设置，您希望将其传递给ui状态或根本不传递任何内容。

对于我们来说，到目前为止设置工作正常，所以如果您遇到任何麻烦，请告诉我。

修改

使用Director的另一个设置可以在Mobservable TodoMVC示例

中找到

Answer 2

链接这个因为我觉得它很有帮助。我基本上遵循这里的方法：https://github.com/contacts-mvc/mobx-react-typescript/blob/master/src/components/ContactDetails/index.tsx。

在应用程序的索引页面或定义路径的任何位置初始化商店/模型。然后将初始化的存储传递给组件。组件componentWillMount内部从路径中获取ID并将其传递给函数以加载数据。

如果您已加载数据，请创建一个更改所选项目的方法。确保遵守选择项属性，并且应该自动更新UI。我认为@mweststrate是UI状态的意思。