Question

我正在尝试使用历史记录推送将状态传递给我的组件，但无法正常工作。

会发生什么：

位置道具未传递到所有组件
如果我刷新（F5）屏幕，那么位置道具将使用我之前从屏幕发送的值填充

现在这是我的App.js渲染的代码：

render() {
    return (
      <Router>
        <div>
          <Route path="/" render={props => <Header {...props} token={this.state.token} username={this.state.username}  />} />
          <Route exact path="/" render={props => <Marketplace key="marketplace" {...props}  />} />
          <Route path="/login" render={props => <Login {...props} updateUsernameAndToken={this.updateUsernameAndToken} />} />
          <Route path="/create-account/*" render={props => <CreateAccount {...props} />} />   
          <Route path="/" render={props => <Footer {...props} />} /> 
        </div>
      </Router>
    );
  }
}

在登录组件中，这就是我将其推入下一个登录的方式：

marketplace = (username, token) => {
        console.log("Inside marketplace with username: " + username + " and token: " + token);
        this.props.history.push({
            pathname: "/",
            state: {
                username: username,
                token: token
            }
        });
    }

在没有正确位置的情况下呈现的组件是Header。正确打印位置道具的一个是Marketplace。

我正在执行的流程是：我访问本地主机：3000（因此我显示页眉，市场和页脚）然后，我单击“登录”链接，该链接会推送到/ login

goToCreateAccount = () => {
        this.props.history.push("/create-account/profile");
    }

已在HeaderTop组件中完成。这是我的Header组件的渲染：

render(){
        const currentState = this.state;

        let content;
        if(currentState.loading){
            content = <div className="loading">Loading&#8230;</div>
        }else{
            content =
                <div className="sticky-top">
                    <HeaderTop {...this.props} userInfo={this.state} />
                    <HeaderBottom userInfo={this.state}  />
                </div>
        }
        return content;
    }

我在想什么位置。状态道具不是显示在标题中，而是显示在市场中？

如果我要求在Header.render方法中打印this.props，则不会返回location.state，而location.path仍为/ login而不是/ 当我刷新时，然后location.path和location.state都正确显示。

ReactJS历史记录推送未将状态传递给所有组件

0 个答案: