react-TSあなたが既にログインしている場合にログインコンポーネントを隠す方法

Question

私はそこにいくつかの記事があると知っていますが、私はtypescriptと反応するルータを使用しています。 。

export default class Layout extends React.Component<{ appState: AppState }, {}> { 
    render() { 
    return (
     <Router children={appState}> 
     <Login appState={appState} /> 
     <div className="main-content"> 
      <Home /> 
     </div> 
     </Router> 
    ); 
    } 
} 

loginComponent：

export default class Login extends React.Component<{ appState: any }, {}> { 
    render() { 
    return (<LoginComponent />); 
    } 
} 

ええ、それはスロー例外 "ルータが唯一の子要素を有していてもよいです"。ユーザーが編集othwerwiseログインコンポーネントに

をログインした場合どのように私は条件がホームコンポーネントをレンダリング設定することができます。 AppState（mobx）

export class AppState { 
    @observable public username: any = null 
    @observable public password: any = null 
    @action setUsername(username:any){ 
     this.username=username; 
    } 
    @action setPassword(password:any){ 
     this.password=password; 
    } 

} 

Answer 1

私はlogined値である1を理解couldntの。しかし、あなたの質問は一般的な "条件"の問題です。

const CheckLogin = this.username==null ? "NotValid" : "Logined" 

あなたがあなたのシステムにこのコード