ReactJs React-Router Navigation

Question

Ich bin mit einigen Problemen im Zusammenhang mit der Navigation react-Router fest. In meiner Navigation gibt es 2 Menü Login und registrieren, und meine Indexseite ist Login.

Auf der Anmeldeseite nach Eingabe des Wertes von emaild und Passwort und Absenden der Login-Schaltfläche wird die Ausgabe als sessionValue.My sessionValue ist der Benutzername, der von serverSide zurückkehrt und auf die TodoApp-Seite umleitet. Nach der Anmeldung wurde auf die TodoApp-Seite umgeleitet. Ich möchte das Logout-Menü anzeigen, anstatt mich in der Navigation einzuloggen.

Mein Code ist wie folgt:

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') 
); 

Navigationskomponente

Ich habe versucht, dies durch localstorage verwenden, aber es funktioniert nicht. Es funktioniert nur, wenn ich den Rückwärtspfeil des Browsers angeklickt habe.

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-Seite (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); 
     }); 
    } 
}, 

Fragen:

1. wie Login/Logout-Menü anzuzeigen/auszublenden.
2. nach dem Abmelden Menü Login-Show und wenn wir auf Logout-Menü anzeigen Anmelden Menü klicken

Answer 1

Sie sollen einig Zustand-Management-Strategie hinter der Szene, dieses Verhalten zu implementieren. So können Sie die folgenden Komponentenstruktur haben

App 
- Nav 
- LoginForm 

ohne staatliche Verwaltung Bibliothek wie Redux/mobX Sie benötigen Zustand definiert haben in App-Komponente

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> 
    ); 
    } 
} 

Dann in Ihrem Nav-Komponente können Sie isLoggedIn verwenden Flagge

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

Sie weitere Informationen über Zustand finden in reagieren Anwendung in ihre docs hier https://facebook.github.io/react-native/docs/state.html

In redux/mobx wird es auf andere Weise gemacht.