Как отправить данные при маршрутизации из компонента div на новую страницу в React?
У меня есть компонент div внутри маршрута, который является маршрутом по умолчанию. Из этого компонента onClick я хочу отправить объект JSON на новую страницу. Это будет недавно открытая страница. Прямо сейчас я не мог найти лучшей альтернативы, поэтому я отправляю весь объект JSON в URL-адресе, но я знаю, что это неправильный способ сделать это. Вот как я это делаю. Я отправляю данные объекта JSON в URL-адресе и использую push-перенаправление для перехода на новую страницу './shopdetail':-
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
class ShopsCatOptions extends React.Component{
constructor(props){
super(props);
this.state = {
shopd: this.props.shop.name,
redirect:false,
data:JSON.stringify(this.props.shop)
};
}
handleOnClick = () => {
this.setState({
redirect: true,
});
}
render() {
if (this.state.redirect) {
return <Redirect push to = {"./shopdetail/"+this.state.data}/>;
}
return(
<div class = "expndinnerm" onClick = {this.handleOnClick}>
{
this.state.shopd
}
</div>
)
}
}
export default ShopsCatOptions
Как лучше отправить эти данные. Можем ли мы отправить его способом, аналогичным тому, как мы передаем реквизиты внутренним компонентам?
Ответы 2
Вы можете использовать историю реквизита для толчка:
this.props.history.push({
pathname:"/shopdetail",
state:{
key:"value"
}
});
Ключевое значение - это все, что вы хотите, в вашем случае в основном логическое значение перенаправления.
Внутри вашего неклассового компонента вы можете получить доступ к состоянию через:
this.props.shopdetail.state (just an example)
You can do something like this
<Redirect to = {{
pathname: '/shopdetail',
state: { referrer: this.state.data}
}} />
To access:
this.props.location.state && this.props.location.state.referrer