Question

我正在使用react 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

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

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

登录后重定向到主页

1 个答案: