重定向登錄後登錄反應

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