Javascript 到子组件的动态路由

我的案例与路由有关。我的应用程序中有n个用户。列在无序列表中。每个

li

元素都是一个

链接

：

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

好的，所以我想把

user

对象传递给组件，它保存了需要在user details组件中显示的所有信息

如您所见，我使用

链接
元素中的
to
prop中传递的
state
参数完成了此操作。它工作正常，但是在新选项卡中复制并粘贴到组件的直接链接时失败

/user/1
-页面加载失败，因为
状态
为
未定义
（未正确通过
链接
）

我的问题是：如何正确地做？我想这不是最正确的方法

注意我可以将其与redux连接，从props-
id
中获取
参数
，然后搜索整个
用户
对象数组，找到id==1
的特定对象，但这有意义吗？我确信一定有更简单的方法来修复它。提前谢谢！
 ReactRouter状态对象应用于与应用程序范围内的位置转换相关的临时数据

状态：{fromDashboard:true}）

这只是一面简单的旗帜。临时状态，对于应用程序全局状态来说并不重要

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

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

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

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

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

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