帶電子空白頁的React Router

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。 這將對電子有效，因為反應重定向提供了與電子兼容的路徑。