如何在ReactJS中使用if else重定向

时间:2015-04-17 08:22:20

标签: reactjs react-router

我想根据用户是否登录来重定向用户,我正在使用react-router用于此目的但我不知道我做错了什么因为我总是遇到以下错误注销并登录状态。

    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

这就是班级的样子。

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:info@skillspeed.com" className="emaillink">&nbsp;info@skillspeed.com </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('/');

              }

    }
});

重定向有效,但当我尝试访问该页面时,渲染部分不起作用。 我已经看了一下reactjs网站上的if else示例,但我无法弄清楚如何在这种情况下使用它;

1 个答案:

答案 0 :(得分:2)

如果else,你忘记归还某些内容。所以你的反应崩溃了。