ルータ側の条件に基づいてアクションをディスパッチする方法

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

     } 
    }); 
    }} /> 
}