如何将数据传递到React中<redirect>中的页面?

时间:2018-06-02 04:27:50

标签: reactjs react-router

现在我正在使用重定向到新页面,但我不知道如何将数据传递到新页面。这就是我在做的事情: -

class ShopsCatOptions extends React.Component{
    constructor(props){
        super(props);
        this.state={            
            shopd: this.props.shop,
            redirect:false

        };        
    }

    render() {
        if (this.state.redirect) {
            return <Redirect push to="./shopdetail" data={this.state.redirect}/>;
        }

        return(
            <div class="expndinnerm" onClick={this.handleOnClick}>
            {
                this.state.shopd        
            }
            </div>
        )
    }

}
export default ShopsCatOptions

这样做的正确方法是什么?

1 个答案:

答案 0 :(得分:2)

我为实现这一点所做的是使用历史道具,

this.props.history.push({
             pathname:"/shopdetail",
             state:{
                 key:"value"
              }
            });

在ShopDetail组件中,您可以访问对象,

this.props.location.state.key

编辑:要获取道具中的历史记录,您的主要组件应具有

import { BrowserRouter, Route } from 'react-router-dom';
...
<BrowserRouter>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/user" component={User} />
    <Route path="*" component={page404} />
  </Switch>
 </BrowserRouter>