2017-09-29 3 views
0

Ich bin neu arbeiten mit reagieren v4 und ich versuche, auf eine andere Seite, so etwas wie eine Homepage nach dem Benutzer authentifizieren in, aber ich bekomme Probleme mit verschachtelten Routen, habe ich versucht this solution und this in documentation funktioniert aber nicht so, wie ich brauche.umleiten nach Hause nach dem Login reagieren

Das ist mein index.js

ReactDOM.render((
    <Provider store={store}> 
     <Router history={history}> 
      <Route path="/" component={Login}> 
      <MuiThemeProvider> 
       <div> 
        <div> 
         <SearchBar/> 
         <MainMenu/> 
        </div> 
         <Switch> 
          <Route path="/home" component={HomeAllSubjects}/> 
          <Route path="/calendar" component={UnderConstruction}/> 
          <Route path="/myPlan" component={UnderConstruction}/> 
          <Route path="/myWorks" component={MyWorks}/> 
          <Route path="/indicators" component={UnderConstruction}/> 
          <Route path="/myGroups" component={GroupsContacts}/> 
          <Route path="/eduteca" component={UnderConstruction}/> 
          <Route path="/notifications" component={HomeGroups}/> 
          <Route path="/miSer" component={UnderConstruction}/> 
          <Route path="/help" component={MyGroupsDescription}/> 
          <Route path="/topic" component={HomeSubject}/> 
          <Route path="/areaInfo" component={HomeUnit}/> 
          <Route path="/comments" component={CommentsList}/> 

         </Switch> 
        <Footer/> 
       </div> 
      </MuiThemeProvider> 
      </Route> 
     </Router> 
    </Provider> 
), document.getElementById('content')); 

Und das ist mein Login.js render Methode

render() 
{ 
    debugger; 
    if (this.props.redirecter) 
    { 
     history.push('/home'); 

    } 

    return (
     <div> 
      <HeaderLogin/> 
      <div style={{ marginLeft: '300px', padding: '100px'}}> 
       <div className="container"> 
        <div className="row"> 
         <div className="col-md-offset-5 col-md-3"> 
          <form style={styles.formlogin} onSubmit={this.handleClick}> 
           {this.props.errorMessage ? <h5>{this.props.errorMessage}</h5> : null} 


           <input style={styles.formcontrol} type="text" className="form-control input-sm chat-input" placeholder='Usuario' onChange={this.onUserChange}/><br/> 
           {this.state.userMessage ? <span style={styles.mess}>{this.state.userMessage}</span> : null} 
           <br/> 

           <input style={styles.formcontrol} type="password" className="form-control input-sm chat-input" placeholder='Clave' onChange={this.onPasswordChange}/><br/> 
           {this.state.passMessage ? <span style={styles.mess}>{this.state.passMessage}</span> : null} 
           <br/> 
           <div style={styles.wrapper}> 
           <span className="group-btn"> 
            <button type="submit" className="btn btn-primary btn-md" value="Submit" >Login</button> 
           </span> 
           </div> 

          </form> 
         </div> 
        </div> 
       </div> 
      </div> 

      <Footer/> 
     </div> 
    ); 
} 

}

HINWEIS: wenn ich die Login-Route in die Swictch gesetzt wird funktioniert aber wenn man es außen hin gibt, erscheint dies:

errors in the browser console

Vielen Dank für Ihre Hilfe.

+0

Try 'exact' zu Ihrer Login-Route hinzugefügt wie dies '' – Panther

+0

Hallo, Danke für die Antwort, aber ich habe es versucht und funktioniert nicht einmal die App nicht laden diesen Fehler in der Konsole anzeigen: Warnung : und sollten nicht auf derselben Route verwendet werden; wird ignoriert – falzate

Antwort

0

Ich denke, Sie sollten genau in Ihrer Route Pfad verwenden.

<Route exact path="/home" component={HomeAllSubjects}/>

Btw, ist es eine gute Praxis, die Routen in eine einzige Datei zu trennen, versuchen Sie so etwas in Ihrer index.js Datei:

import {Router, browserHistory} from 'react-router'; 
import routes from 'your routes file path'; 
ReactDOM.render(
<div> 
    <Provider store={store}> 
    <Router history={browserHistory} routes={routes}> 
    </Provider> 
</div> 
, document.getElementById('container')); 
+0

puttiing "genau" auf die Route funktioniert nicht, ich habe bereits die Routen in einer anderen Datei, wie Sie empfehlen, aber auf diese Weise {routes} becouse wie du sagst nicht funktionieren und ich kann nicht umleiten nach dem Login nach Hause noch, danke für die Antwort – falzate

+0

Können Sie mir den Quellcode senden? Ich werde versuchen, es zu lösen, aber ich muss den gesamten Code sehen. Schick mir eine Nachricht, wenn du kannst. – tulioco

+0

Danke für Ihre Hilfe, Sie können das Projekt finden [hier] (https://github.com/falzate81/LoginReact), nochmals vielen Dank. – falzate

Verwandte Themen