重定向时如何将props发送到reactjs

IT技术 reactjs typescript react-router
2021-05-15 06:10:19

我试图在通过 React Route(重定向到)重定向​​到路由时发送props,但组件(SideBar)没有收到任何props。我应该如何发送props以及如何在组件中接收props?我想从当前状态发送一个props。

父组件 (WelcomeScreen.tsx)

render(){

    return (  
        this.state.idUser != -1 ?  <Redirect to={{
            pathname: '/Activities',
            state: { referrer: this.state.idUser }
            }}/> :   
        <div>
            {this.renderHeader()}
            <div className='screenUser'>
                {this.renderPanelUpButtons()}
                {this.renderWelcomeMenu()}
            </div>
        </div>

    );

活动.tsx

export interface ActivitiesProps {
idUser: number;
}

interface ActivitiesState {  
message: string;
activitiesFirstPart: IActivity[];
activitiesSecondPart: IActivity[];
}

componentWillReceiveProps(newprops : ActivitiesProps){
    if(newprops!== this.props){
        this.props = newprops;
    }

}

这里组件不会收到任何props。

为了更容易理解,我还列出了路线;

render() {
    return (
        <div className="hangouts-body">
            <div>
                <Route path="/" exact={true} component={WelcomeScreen} />
                <Route path="/Groups" exact={true} component={Groups} />
                <Route path="/Activities" exact={true} component={Activities} />
                <Route path="/OneActivity" exact={true} component={OneActivity} />
            </div>
        </div>
    );
}
3个回答

在 React 中通过 url 获取 props 有点不同。以下几行简要说明了该过程

路线部分:

<Route path="/Activities/:idUser" exact={true} component={Activities} />

重定向部分:

<Redirect to={`/Activities/${this.state.idUser}`}/>

获取props部分

props.match.params.idUser

我在不向用户显示数据的情况下传递数据的方法是使用历史props,

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

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

this.props.location.state.key

就像在 to:object 中发送一样简单,检查文档https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md

<Redirect to={{ pathname: "/login", state: { from: props.location } }} /> 然后可以通过 this.props.location.state.from 访问