Я получаю список продуктов в ProductList, в котором мне нужно передать выбранный объект продукта в Product.

В настоящее время я пытаюсь передать id в качестве параметра маршрута и снова получить объект продукта. Но я хочу отправить весь объект продукта из ProductList в Product.

Мой маршрут

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

Ссылка компонента ProductList

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

Как передать объект продукта Product в качестве реквизита?

Ниже выдает ошибку в Typescript, говоря, что следующее свойство не существует для типа Link.

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

Я пытался ответить на следующие вопросы, но, похоже, ни у кого из них не было проблем.

6
Prajwal 23 Фев 2018 в 16:56

3 ответа

Лучший ответ

Свойство "to" Link может принимать объект, поэтому вы можете передавать свои реквизиты следующим образом:

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

Тогда вы сможете получить к ним доступ в this.props.location.myCustomProps

7
Dyo 9 Ноя 2019 в 11:43

Вы можете попытаться сделать это с помощью параметров запроса, как в передать объект через Link в реагирующий маршрутизатор, что довольно некрасиво.

Также вы можете попробовать заменить Link другим элементом, например, кнопку и в прослушивателе щелчка изменить местоположение с помощью browserHistory.push({ pathname:"/product/" + this.props.product.Id, state: this.props.product}) и и продукт как свойство state.

0
Sergii Vorobei 23 Фев 2018 в 14:18

Я бы предложил использовать redux для получения данных. При переходе к маршруту продукта вы можете получить подробные сведения product, отправив какое-либо действие.

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

Маршрут product должен быть связан с магазином. Надеюсь это поможет.

2
Dev 23 Фев 2018 в 14:04