在 React 路由器中通过 Link 传递对象

Question

是否可以通过 react-router 中的 Link 组件传递对象？

类似于：
<Link to='home' params={{myObj: obj}}> Click </Link>

与我将 props 从 Parent 传递到 Child 组件的方式相同。

如果不可能，最好的方法是什么：
我有一个 React + Flux 应用程序，我用一些数据渲染了 table。我想要做的是，当我单击其中一行时，它会将我带到该行的某些 details 组件。该行包含我需要的所有数据，所以我认为如果我可以通过 Link.

传递它会很棒

另一种选择是传递 url 中行的 id，在 details 组件中读取它并从中请求数据ID 的商店。

不确定实现上述目标的最佳方法是什么...

Answer 1

不，你不能在 params 中传递一个对象，所以我同意你的看法，你最好的计划是将 id 传递给商店，让商店发出一个 CHANGE事件，并让组件查询商店的信息。

Answer 2

这是不可能的，您需要传递一些可以存储在 URL 中的东西，例如字符串 ID。然后您将使用该 ID 执行对象查找。

Answer 3

所以我对这个问题的最终结论是我没有想好。通过 Link 传递我的数据似乎很自然，这样我就可以在我的 Child 组件中访问它们。正如 Colin Ramsay 提到的，在 Link 中有一个叫做 state 的东西，但这不是实现它的方法。当数据通过 Link 传递时，只有当用户单击某些内容并被带到 Child 组件时，它才会正常工作。

当用户访问Link中使用的url时，问题就来了，无法获取数据。

所以我的解决方案是在 Link 参数中传递 ID 然后检查我的 Store 是否有数据（用户通过 Link 访问它)，然后从 Store 中获取此数据。

或如果数据不在Store调用action从API获取数据。

Answer 4

您可以尝试JSON序列化它，然后在接收端反序列化它。

Answer 5

可以通过 Link 传递对象。（这不是最佳做法，但有可能）

在查询中添加您的数据而不是参数并将对象字符串化：

<Link to={{ 
  pathname: `/blog/${post.id}`, 
  query: {
    title: post.title, 
    content: post.content,
    comments: JSON.stringify(post.comments)
  } 
}}>Read More...</Link>

然后在您的子组件中将字符串解析回一个对象：

JSON.parse(this.props.comments)

Answer 6

使用 react-roter-dom ver 5.1.2 和 es6

我解决了这个问题，首先我将它存储在 Link 的搜索部分以对象意味着它是 url 的一部分并支持书签等

< Link to={{
          pathname: `${match.url}/${dogName}`,
          search: `choosenDog=${JSON.stringify({ ...dog })}` //dog is the object to pass along
        }
        } >

然后在 link 上，我们转到我这样掌握它

const query = useQuery();
const dogString = query.get('choosenDog');
const dogObject  = JSON.parse(dogString);

在 React 路由器中通过 Link 传递对象

Pass object through Link in react router

reactjs

reactjs-flux

react-router