umleiten nach Hause nach dem Login reagieren

Question

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.

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.

Answer 1

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