Question

我的案例与路由有关。我的应用中有n个用户。列在无序列表中。每个li元素都是Link：

<Link to={{ pathname: `user/${user.id}`, state: { user } }}>

路线代码：

{
  path: 'user/:id',
  name: 'userDetails',
  getComponent(nextState, cb) {
    import('app/UserDetails')
      .then(loadModule(cb))
      .catch(errorLoading);
  },
}

Okey，所以我想将user对象传递给组件，该对象包含需要在用户详细信息组件中显示的所有信息。

正如您所看到的，我已经在state元素中的to prop内传递了Link参数。它工作正常，但当我将新链接复制并粘贴到新标签中的组件时失败。

/user/1 - 页面无法加载，因为state为undefined（它未通过Link正确传递。

我的问题是：怎么做得好？我想这不是最直接的方法。

注意我可以将其与redux连接，从道具param获取id并搜索整个 {{1}使用users的特定对象的对象数组，但它有意义吗？我确定必须有一些更简单的方法来解决它。提前谢谢！

Answer 1

ReactRouter状态对象应该用于与应用范围内的位置转换相关的临时数据。以下是文档中的完美示例：

州：{fromDashboard：true}）

这只是一个简单的旗帜。临时状态对您的应用程序全局状态并不重要。

当您直接打开URL或来自其他站点时 - 没有创建转换，因此状态对象不存在，您的解决方案永远不会工作。

您的第二种方法是正确的。

不要混淆模块的职责。 React路由器负责路由，另一个模块应提供状态。将某些数据注入路由器的可能性并不意味着您应该将其用作数据提供者。它为测试提供了难以调试，记录和模拟的数据。

问问自己为什么使用Redux？可能会保持您的州清洁，可读和可预测。那你为什么要试着用一些聪明的技巧来避免使用呢？在您的示例中，您已经使用应用程序状态创建了完全分离状态不同步。那种方法会咬你。

您可以使用高阶组件来管理状态并传递道具（但总是来自一个单一的事实来源（可能是Redux ......）），或者只使用更简单或更抽象的状态管理器。

到子组件的动态路由

1 个答案: