Reactjs 如何在从div组件路由到react中的新页面时发送数据?
我在路由中有一个div组件,它是默认路由。我想从这个组件onClick向新页面发送一个JSON对象。这将是一个新打开的页面。现在我找不到更好的替代方法,所以我在URL中发送整个JSON对象,但我知道这不是一个正确的方法。下面是我是怎么做的。我正在url中发送JSON对象数据,并使用重定向推送转到新页面。“/shopdetail”:-Reactjs 如何在从div组件路由到react中的新页面时发送数据?,reactjs,react-router,Reactjs,React Router,我在路由中有一个div组件,它是默认路由。我想从这个组件onClick向新页面发送一个JSON对象。这将是一个新打开的页面。现在我找不到更好的替代方法,所以我在URL中发送整个JSON对象,但我知道这不是一个正确的方法。下面是我是怎么做的。我正在url中发送JSON对象数据,并使用重定向推送转到新页面。“/shopdetail”:- import React, { Component } from 'react'; import { Redirect } from 'react-router-d
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
发送此数据的更好方式是什么。我们能否以类似于将道具传递给内部组件的方式发送它?您可以使用道具历史记录进行推送:
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