라우터 측면의 조건을 기반으로 작업을 전달하는 방법

Question

올바른 방법으로 조건을 기반으로 작업을 전달하는 방법 : 다음 작업을 수행하지만 구문 오류가 발생합니다.

---

const PrivateRoute = ({ component: Component, ...rest }) => { 
    <Route {...rest} render={props => (
      firebase.auth().onAuthStateChanged((user) => user 
      ?(
      store.dispatch(actions.login(user.uid)); 
      <Component {...props}/> 
     ) 
      :(
      store.dispatch(actions.logout()); 
      <Redirect to={{ 
       pathname: '/login', 
       state: { from: props.location } 
       }}/> 
      ) 
     ) 
     )}/> 
     } 

Answer 1

정기 괄호 ((..))는 값을 반환 할 수 있습니다. 이것이 구문이 잘못된 이유입니다. 당신은 아래와 같이해야합니다.

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

    // return the Route component 
    return <Route {...rest} render={props => { 
    firebase.auth().onAuthStateChanged((user) => { 
     if(user) { 

     // run dispatch 
     store.dispatch(actions.login(user.uid)); 
     // return component 
     return <Component {...props} /> 

     } else { 

     // run dispatch 
     store.dispatch(actions.logout()); 
     // return component 
     return <Redirect to={{ pathname: '/login', state: { from: props.location } }} /> 

     } 
    }); 
    }} /> 
}