Question

我正在将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时电子会错误地处理路径。

Answer 1

首先，绑定您的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。这将对电子有效，因为反应重定向提供了与电子兼容的路径。

带电子空白页的React Router

1 个答案: