При перенаправлении внешний JS не работает в реакции-роутер-дом - PullRequest
0 голосов
/ 04 сентября 2018

Я создаю приложение, используяact.js и Node.js, и использую response-router-dom 4 для внешней маршрутизации.

Я использую jquery для запроса AJAX. Существует пользовательский интерфейс входа в систему, когда пользователь вошел в систему с учетными данными, а затем перенаправил на страницу панели мониторинга с помощью 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 не работает должным образом. Может быть, есть некоторая проблема при рендеринге на странице. Я застрял в этом. Ниже приведена конфигурация маршрута

<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>

Я не могу выяснить, что происходит не так. Пожалуйста, помогите!

1 Ответ

0 голосов
/ 04 сентября 2018

Как вы импортируете свой 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())
        });
}
...