How to redirect using if else in ReactJS

Question

I want to redirect a user based on whether he is logged in or not, I am using react-router for this purpose but I don't know what i am doing wrong as I am always met with the following error for the logged out and logged in state.

    Uncaught Error: Invariant Violation: LMS.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
ReactReconciler.js:55 Uncaught TypeError: Cannot read property '_currentElement' of null

This is what class looks like.

var LMS = React.createClass({

    mixins: [Reflux.connect(CourseStore, "data")],

    contextTypes: {
        router: React.PropTypes.func
    },


    render: function() {

        var loggedIn = this.state.loggedIn;
        var scope = this;

        if(loggedIn === 'true'){

              return (
                        <div id="LMS" className="container">
                            <div className="col-xs-3">
                                    <div className="widget pricing contact_mobile" id="lms-img">
                                        <div>
                                            <ul><li className="phone_support">
                                                    <span className="fa-bg bg-orange"><i className="fa fa-phone"></i>&nbsp;<span className="country">Ind</span></span><span className="top-phone" href="tel:+919066020904">&nbsp;&nbsp;+91-90660-20904</span>
                                                </li>
                                                <li className="phone_support top-margin">
                                                    <span className="fa-bg bg-green"><i className="fa fa-phone"></i>&nbsp;<span className="country">USA</span></span><span className="top-phone" href="tel:18666076547">&nbsp;1866-607-6547 (Toll Free)</span>
                                                </li>
                                                <li className="email_support top-margin" >
                                                     <span className="fa-bg bg-blue"><i className="fa fa-envelope"></i></span> <a href="mailto:[email protected]" className="emaillink">&nbsp;[email protected] </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                            </div>
                            <div className="col-xs-8 course-accordion" id="lms-block">
                                <h2>{ scope.state.data.title }</h2>
                                <Curriculum />
                            </div>
                        </div>
                    );

              } else {

                scope.context.router.replaceWith('/');

              }

    }
});

The redirection works, but the render part doesn't work when i am trying to access the page. I have taken a look at the if else example in the reactjs site but i can't figure out how to use it in such a situation;

I think the render function should always return a ReactComponent. So even when you do the redirect, make sure you "return <div></div>" as well. — WesleyE
– WesleyE, Commented Apr 17, 2015 at 8:24
Thanks man, that worked well. I added a return(<div></div>); right after the replace part and it worked well. — Bazinga777
– Bazinga777, Commented Apr 17, 2015 at 8:32

Dustin Hoffner · Accepted Answer · 2015-04-17 08:25:06Z

2

You forgot to return something in case of else. So your react crashes.

answered Apr 17, 2015 at 8:25

Dustin Hoffner

2,1651 gold badge16 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to redirect using if else in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related