在 React-router Link 中将对象作为props传递

IT技术 javascript reactjs typescript react-router react-router-v4
2021-04-25 08:10:06

我正在获取 中的产品列表ProductList，其中，我需要将选定的产品对象传递给Product。

目前，我正在尝试将其id作为路由参数传递并再次获取产品对象。但我想将整个产品对象从 发送ProductList到Product。

我的路线是 

<Route path={joinPath(["/product", ":id?"])} component={Product} />

产品列表组件链接

<Link to={"/product/" + this.props.product.Id} >{this.props.product.Name} </Link>

如何将产品对象Product作为props传递？

下面的一个在 Typescript 中抛出错误，说LinkType上不存在以下属性。

<Link to={"/product/" + this.props.product.Id} params={product}>{Name}</Link>

我尝试了以下问题，但似乎都没有我的问题。

3个回答

的 " to" 属性Link可以接受一个对象，因此您可以像这样传递props：

<Link to={
    { 
        pathname: "/product/" + this.props.product.Id,
        myCustomProps: product
    }
}>
    {Name}
</Link>

然后你应该能够访问它们 this.props.location.myCustomProps

我建议使用redux来检索数据。当您导航到产品路线时，您可以product通过调度一些操作来获取详细信息。

componentDidMount() {
    let productId = this.props.match.params.Id;
    this.props.actions.getProduct(productId);
}

该product路线应与实体店相连接。希望这可以帮助。

您可以尝试通过查询参数来完成它，就像通过 react router 中的链接传递对象一样，这非常难看。

您也可以尝试用其他一些元素替换链接，例如按钮，并在单击侦听器中通过browserHistory.push({ pathname:"/product/" + this.props.product.Id, state: this.props.product})和和产品作为state属性进行位置更改。

其它你可能感兴趣的问题
上一篇这是绑吗？ 下一篇React Hooks：处理多个输入