Progettazione di applicazioni di semplice reazione

Ho un'app molto semplice che ti consente di accedere e quindi di visualizzare un dashboard. Il processo di progettazione con React e Redux è molto semplice:

• Ho due componenti React: Login e Dashboard
• Memorizzo un booleano isAuthenticated nel mio albero di stato

Ora alcune osservazioni:

• Il componente Login può essere visto solo se isAuthenticated è falso
• Il componente Dashboard può essere visto solo se isAuthenticated è true
• Un pulsante nei set di componenti di accesso è Autenticazione su true
• Un pulsante nel set di componenti del dashboard è Autenticazione su falso

Come dovrei implementarlo in React? Ci sono almeno due possibilità:

• utilizzando il routing: / reindirizza a / login se autenticato o / dashboard in caso contrario. Inoltre / login reindirizza a / dashboard se autenticato e / dashboard reindirizza a / login se non autenticato
• presenta un componente App che esegue il rendering di Login o Dashboard a seconda di isAuthenticated

Ecco l'implementazione della seconda proposta:

const Login = (props) => (
  <div className="login">
    <p>Login page</p>
    <input type="button" value="Log in" onClick={props.toggleAuthentication}/>
  </div>
)
const Dashboard = (props) => (
  <div className="dashboard">
    <p>Dashboard page</p>
    <input type="button" value="Log out" onClick={props.toggleAuthentication}/>
  </div>
)
class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {isAuthenticated: false}
  }
  toggleAuthentication(){
    this.setState({isAuthenticated: !this.state.isAuthenticated})
  }
  render() {
    if(!this.state.isAuthenticated){
      return <Login toggleAuthentication={()=>this.toggleAuthentication()}/>
    } else {
    return <Dashboard toggleAuthentication={()=>this.toggleAuthentication()}/>
    }
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);