在重定向上，外部JS无法在react-router-dom中工作

Question

我正在使用react.js和Node.js创建一个应用程序，并使用react-router-dom 4进行前端路由。

我正在使用jquery进行AJAX请求。用户登录api，当用户使用凭据登录，然后使用this.props.history.push('/dashboard')重定向到仪表板页面

UserLoginAPI(){
        let formData = this.state.form;
        $.ajax({ 
            url:BASEURL+CONSTANT.login,
            type:'POST',
            data:formData,
            success:(data)=>{  
                let form = this.state.form;
                this.setState({popUpMessage:data.data });
                this.setState({showPopUp:true});
                this.props.history.push('/dashboard')
            },
            error:(err)=>{ 
                this.setState({popUpMessage:err.responseJSON.message || 'Some Undefined Error Occured.'});
                this.setState({showPopUp:true}) ;
                console.log(err);
            }
        });
    }

成功登录后，用户重定向到仪表板页面，但其外部普通javascript运行不正常。可能在Page中渲染时存在一些问题。我被困在这里。以下是路线配置

<Router>
        <div className="App"> 
          <Header />
          <Slider />
          <Switch>
                <Route exact path='/' component={Home} />
                <Route  path='/register' component={Register} />
                <Route  path='/login' component={Login} />
                <Route  path='/dashboard' component={Dashboard} />
          </Switch>

        </div>
      </Router>

我无法弄清楚什么是错的。请帮忙！

Answer 1

如何导入UserLoginAPI？也许你的示例代码还不够。如果函数在类范围内，则必须使用箭头函数来绑定类上下文，如果API的方法位于外部，则必须从方法返回Promise（）并解析组件中的结果。

// In-class method
UserLoginAPI= () => {
        let formData = this.state.form;
        $.ajax({ 
            url:BASEURL+CONSTANT.login,
            type:'POST',
            data:formData,
            success:(data)=>{  
                let form = this.state.form;
                this.setState({popUpMessage:data.data });
                this.setState({showPopUp:true});
                this.props.history.push('/dashboard')
            },
            error:(err)=>{ 
                this.setState({popUpMessage:err.responseJSON.message || 'Some Undefined Error Occured.'});
                this.setState({showPopUp:true}) ;
                console.log(err);
            }
        });
    }

// Return promise

MyFunction(myParams) {
       return $.ajax({
            url: myParams.url,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(expenseSet.toJSON())
        });
}