在重定向上，外部JS在react-router-dom中不起作用

Question

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

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

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()) }); }