redirect to home after login react

Question

I'm new working with react v4 and I try to redirect to another page, something like a home page after the user authenticate in but I'm getting problems with nested routes, I've tried this solution and this in documentation but doesn't work the way that I need.

This is my 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'));

And this is my Login.js render method

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

}

NOTE: when I put the Login route into the Swictch is working but when a put it outside appear this:

errors in the browser console

Thanks in advence of your help.

Hi, Thanks for answer but I' ve tried that and doesn't work even the app don't load show this error in the console: Warning: You should not use and in the same route; will be ignored — falzate, Sep 29 '17 at 15:56

tulioco · Answer 1 · 2017-09-29T18:09:00.457

0

I think you should use exact in your route path.

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

Btw, it's a good practice to separate the routes into a single file, try something like this in your index.js file:

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

edited Sep 29 '17 at 18:09

answered Sep 29 '17 at 18:03

tulioco

1
3

puttiing "exact" to the route doesn't work, I already put the routes in a different file as you recommend but this way {routes} becouse as you say don't work and I can't redirect after login to home yet, thanks for answer – falzate Oct 03 '17 at 19:09
Can you send me the source code? I will try to solve it, but i need to see the entire code. Send me a message if you can. – tulioco Oct 05 '17 at 06:00
thanks for your help, you can find the project [here](https://github.com/falzate81/LoginReact), thank you again. – falzate Oct 06 '17 at 13:51

redirect to home after login react

1 Answers1