ReactJs React-Router Navigation

Question

私は、反応ルータのナビゲーションに関連する問題を抱えています。私のナビゲーションには2つのメニューのログインと登録があり、私のインデックスページはログインです。

emaildとパスワードの値を入力してログインボタンを入力すると、sessionValueとして出力されます。私のsessionValueはserverSideから返されたusernameで、TodoAppページにリダイレクトされます。ログイン後、TodoAppページにリダイレクトされました。私はナビゲーションのログインの代わりにログアウトメニューを表示したい。

私のコードは以下の通りです：

app.jsx

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path="/" component={Main}> 
     <Route path="RegistrationForm" component={RegistrationForm}/> 
     <Route path="todoapp/:sessionValue"component={TodoApp}/> 
     <IndexRoute component={Login}/> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
); 

ナビゲーションコンポーネント

私はのlocalStorageを使用してこれを試してみましたが、それは動作しません。ブラウザの戻る矢印をクリックしたときにのみ動作します。

var Nav= React.createClass({ 
     render:function(){ 
      var strUserName = localStorage.getItem('sessionValue'); 
      console.log(strUserName); 
     function loginMenu(){ 
       if(strUserName){ 

           return <Link to="/RegistrationForm" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Logout</Link> 

      } 
      else{ 
       return <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>LogIn</IndexLink> 

      } 
     } 
      return(
       <div className="top-bar"> 
         <div className="top-bar-left"> 
          <ul className="menu"> 
          <li className="menu-text"> 
           React App 
          </li> 
          <li> 
           {loginMenu()} 
          </li> 
          <li> 
            <Link to="/RegistrationForm" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Signup</Link> 
          </li> 

          </ul> 
         </div> 
         </div> 
       ); 
     } 
     }); 
module.exports=Nav; 

ログインページ（login.jsx）

if(validForm){ 
     axios.post('/login', { 
     email:this.state.strEmail, 
     password:this.state.strPassword 
     }) 
     .then(function (response) { 
     //console.log(response.data); 
     var sessionValue=response.data; 
//After login todoApp page is open and with session value.session value passed through url to todoApp. 
     browserHistory.push(`todoapp/${sessionValue}`); 
     localStorage.setItem('sessionValue',sessionValue); 
}) 
     .catch(function (error) { 
     console.log(error); 
     }); 
    } 
}, 

質問：

1. /非表示ログイン/ログアウトメニューを表示する方法について説明します。
ログインショーログアウトメニューの後
2. 、我々はログアウトメニューのショーのログインメニューで

Answer 1

をクリックすると、この動作を実装するためのシーンの背後にあるいくつかの状態管理戦略を持っている必要があります。だから、あなたはあなたがisLoggedInを使用することができますが、状態はあなたのナビゲーションコンポーネントに

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.onLoggedInChanged = this.onLoggedInChanged.bind(this); 
    this.state = { 
     isLoggedIn: false 
    } 
    } 
    onLoggedInChanged(isLoggedIn) { 
    this.setState({ 
     isLoggedIn: isLoggedIn 
    }); 
    } 
    render() { 
    return (
     <Nav isLoggedIn={this.state.isLoggedIn} /> 
     <LoginForm onLoggedInChanged={this.onLoggedInChanged}></LoginForm> 
    ); 
    } 
} 

そして、アプリケーション・コンポーネントで定義されている必要があり再来/ mobXのような任意の状態管理ライブラリがなければ、次のコンポーネント構造

App 
- Nav 
- LoginForm 

を持つことができますあなたは状態に関する詳細な情報を見つけることができますフラグ

Nav =() => { 
    let loginElement = this.props.isLoggedIn ? 'Logged in user' : 'Not logged in' 
    return (<div>{loginElement }</div>) 
} 

はそのドキュメント内のアプリケーションを反応させ、ここでhttps://facebook.github.io/react-native/docs/state.html

redux/mobxでは、これは別の方法で行われます。