Reactjs 如何在从div组件路由到react中的新页面时发送数据?

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

我在路由中有一个div组件,它是默认路由。我想从这个组件onClick向新页面发送一个JSON对象。这将是一个新打开的页面。现在我找不到更好的替代方法,所以我在URL中发送整个JSON对象,但我知道这不是一个正确的方法。下面是我是怎么做的。我正在url中发送JSON对象数据,并使用重定向推送转到新页面。“/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

发送此数据的更好方式是什么。我们能否以类似于将道具传递给内部组件的方式发送它?

您可以使用道具历史记录进行推送:

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