javascript - 到子组件的动态路由

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);
  },
}

好的，所以我想将 user 传递给组件对象，它保存用户详细信息组件中需要显示的所有信息。

如你所见，我已经用 state 完成了它to 内部传递的参数Link 中的 Prop 元素。它工作正常，但是当我将直接链接复制并粘贴到新选项卡中的组件时，它失败了。

/user/1 - 页面加载失败，因为 state是 undefined (它没有正确地通过 Link 传递。

我的问题是:如何正确地做到这一点？我想这不是最正确的方法。

注意，我可以将其与 redux 连接，采用 param从 Prop - id并搜索全部 users该特定对象的对象数组 id === 1 ，但这有意义吗？我确信一定有一些更简单的方法来解决它。预先感谢您!

Answer 1

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

state: { fromDashboard: true })

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

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

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

不要混合模块的职责。 React router 负责路由，另一个模块应该提供状态。向路由器注入(inject)一些数据的可能性并不意味着您应该将其用作数据提供者。它为测试进行硬调试、记录和模拟数据。

问问自己为什么使用 Redux？可能是为了保持你的状态干净、可读且可预测。那么为什么你要试图通过一些聪明的技巧来避免使用它呢？在您的示例中，您已经创建了与应用程序状态完全不同步的独立状态。这种方法会咬你。

您可以使用高阶组件来管理状态并向下传递 Prop (但始终来自单一事实来源(可能是 Redux...))，或者只使用更简单或更抽象的状态管理器。