时间戳

首页 > 解决方案 > 在重定向外部 JS 在 react-router-dom 中不起作用

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

问题描述

我正在使用 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>

我无法找出问题所在。请帮忙！

标签： reactjsroutingreact-router-dom

解决方案

你如何导入你的 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())
        });
}

推荐阅读