2017-12-07 6 views
1

reactx에서 가입 양식을 만들었으며 예상대로 작동합니다. 문제는 사용자를 대시 보드로 리디렉션하기 위해 해시 라우트에 /을 푸시하려고했지만 오류가 발생한다는 것입니다. 나는 위의 코드를 쓴 Register 구성 요소 파일에서등록 후 리디렉션하는 방법은 무엇입니까?

if (this.isValid()) { 
     // dispatching request for user sing up 
     this.props.userSignupRequest(this.state) 
      .then(response => { 
       this.setState({isLoading: false}); 
       this.context.router.replaceWith('/'); 
      }) 
      .catch(error => { 
       this.setState({errors: error.response.data, isLoading: false}); 
      }); 
    } 

, 나는 (구성 요소 클래스의 외부)뿐만 아니라 아래의 코드를 가지고 :

Register.contextTypes = { 
    router: PropTypes.object.isRequired 
}; 

난 아래와 같은 맥락에서 router을 사용 이것은 어떤 오류도주지 않습니다. 리디렉션은 어떻게 구현해야합니까? react-router은 최신 버전에서 다르게 동작하는 것으로 보입니다.

버전 : "react-redux": "^5.0.6"

+0

* * "이 오류 준다"- 어떤 오류를? –

+0

또한 React Router를 사용 중이라고 가정 할 때, 컨텍스트를 통해 라우터에 액세스 할 의도가 없다는 것을 확신합니다. [리디렉션 방법에 관한 문서] (https://reacttraining.com/)를 읽었습니까? react-router/web/example/auth-workflow)? –

답변

2

나는 생각한다, 아래의 방법 중 하나를 사용한다 :
1) 사용 - 라우터 REDUX 반응 - https://github.com/reacttraining/react-router/tree/master/packages/react-router-redux을 당신은 행동을 만들고 행동 내에서 사용할 수있는

import {push} from 'react-router-redux' 

const goTo = (dispatch) => { 
    dispatch(push('/')); 
} 

2) 당신은 몇 가지 URL로 리디렉션 구성 요소를 사용할 수 있습니다

load(){ 
    if (this.isValid()) { 
     // dispatching request for user sing up 
     this.props.userSignupRequest(this.state) 
      .then(response => { 
       this.setState({isLoading: false, goTo: '/'}); 
      }) 
    } 
    } 

    render(){ 
    const {isLoading, goTo} = this.state; 

    return goTo? <Redirect to={goTo} /> : (
     <div>Component</div> 
    ) 
    }