带电子空白页的React Router

时间:2018-10-15 15:03:22

标签: javascript reactjs electron

我正在将React与Electron一起使用。当我在按钮中使用这样的路由器时,在构建react项目并用电子将其编译之后,运行React项目即可工作:

const ButtonNo = withRouter(({ history }) => (
<button className="wizardbuttons"
        type='button'
        onClick={() => { history.push('/Institution') }}
>
    Skip Setup
</button>
))   

但是,我有一些ajax和jquery方法,在返回成功后,我想使用它们进行导航。当我使用window.location转到另一个页面时,它可以很好地与react一起工作,但是当我在电子环境中运行它时,我会得到一个空白页面。

$("#submit").click(function() {




        $.post("address",
            {

                  // Post data

            },
            function (data, status) {


                if (status == 'success') {



                    //nav to screen on success
                    //works with react but gives a blank page with electron
                    window.location = "./PageIWantToGoTo";

                }


            });

    }
  });

我如何响应React与电子结合的ajax成功?我怀疑在不使用withRouter时电子会错误地处理路径。

1 个答案:

答案 0 :(得分:0)

首先,绑定您的ajax。

$.ajax({
        type: 'POST',
        url:  "path",

        headers: {


        },
        data: {

        },
        success: function(data) {


            this.setState({
                successfullmessage: true
            });




        }.bind(this),
        error: function(errMsg) {
            console.log(errMsg);
        }.bind(this),
    });

在这样的内容中:

 super(props);
    this.state = {

        successfullmessage: false

    }

this.submitclick = this.submitclick.bind(this);
submitclick() {

               // ajax here 

              }

然后,您可以在ajax函数成功的内部使用this.setState。

接下来,要在返回之前在render(){}中导航,您可以执行以下操作:

if (this.state.successfullmessage) {
        return <Redirect to="/MainMenu" />;
    }

因为您已经更新了状态,所以只要布尔值已设置为true,React就会自动重新渲染并执行Redirect。这将对电子有效,因为反应重定向提供了与电子兼容的路径。