重定向登录后登录反应

Question

我新的工作与反应v4和我尝试重定向到另一个页面，像用户身份验证后，但我遇到了嵌套的路线问题，我已经尝试过的主页this solution和this in documentation，但不以我需要的方式工作。

这是我的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')); 

这是我Login.js渲染方法

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

}

注意：当我把登录路由到Swictch被工作，但当一个把它外面出现这样的：

errors in the browser console

非常感谢您的帮助。

Answer 1

我认为你应该在你的路线中使用确切的路径。

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

顺便说一句，这是一个很好的做法，路由分离成单个文件，尝试这样的事情在你的index.js文件：

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