Route.render() : 유효한는 요소 (또는 null) 반작용 반환해야합니다

Question

난 내가 하나 개의 루트 요소를 반환하지만, 다음과 같은 오류를 얻을 :

Route.render을() : 유효한 반작용 요소 (또는 null)을 리턴해야합니다. 이 정의되지 않았거나 배열 또는 다른 잘못된 개체를 반환했을 수 있습니다.

---

파견 함수

하지

---

내 코드 :

export var PrivateRoute = ({ component: Component, ...rest }) => { 

    return (
    <Route {...rest} render={props => { 
    firebase.auth().onAuthStateChanged((user) => { 
     if(user) { 
     console.log('ON...ON'); 
     var {dispatch} = props; 
     dispatch(actions.login(user.uid)); 
     dispatch(actions.startAddTodos()); 
     return(
      <Component {...props} /> 
     ) ; 

     } else { 
     console.log('OFF...OFF'); 

     dispatch(actions.logout()); 

     return (
      <Redirect to={{ pathname: '/login', state: { from: props.location } }} /> 
     ); 

     } 
    }); 
    }} />); 
} 
export default Redux.connect()(PrivateRoute); 

---

Github Link

Answer 1

저는 주된 문제는 비동기 함수 내부에서 UI를 반환한다는 것입니다.

인증 작업이 완료 될 때까지 사용자에게 표시 할 항목이 isLoading이어야합니다. isLoading이 참일 때로드 표시기 을 표시해야합니다. 그렇지 않으면 인증 성공 또는 실패와 관련된 다른 구성 요소를 표시해야합니다.

인증 성공 또는 실패의 상태도 정의해야합니다.

주 : 나는 당신의 REDUX 상태 트리에 대해 잘 모르기 때문에 대신 돌아 오는의 구성 요소 상태 시스템을 반응 사용하는거야. 자유 전환을 Redux로 자유롭게 시도하십시오

먼저 라우팅 할 구성 요소를 별도의 클래스 구성 요소로 리팩터링해야합니다. 의는 구성 요소 UserAuth

class UserAuth extends Component { 
    state = { 
    isLoading: true 
    isUserAuth: false 
    } 

    componentDidMount() { 
    firebase.auth().onAuthStateChanged((user) => { 
     if(user) { 
     this.setState({isLoading: false, isUserAuth: true}) 
     // the rest of your logic here 
     } 
     else { 
     this.setState({isLoading: false, isUserAuth: false}) 
     // the rest of your logic here 
     } 
    } 

    render() { 
    return (
     {this.state.isLoading && <LoadingIndicator /> } 
     {!this.state.isLoading && this.state.isUserAuth && <Component {...this.props} />} 
     {!this.state.isLoading && !this.state.isUserAuth && <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />} 
    ); 

    } 
} 

이 두 번째로, 당신의 <Route> 구성 요소에 당신이 뭔가를해야한다고 부르 자 :

<Route {...rest} render={props => (<UserAuth {...props} />)} />