我在控制台“警告:失败的propType:无效道具`组件”提供给`Route`时出现此错误。

时间:2016-01-26 10:30:49

标签: reactjs react-router

我不知道这个错误发生了什么。有一个类似的问题发布,但它使用的是ES6,所以对我来说比较太不一样了。我只是在用户登录后尝试执行一条简单的路由,但是这个错误在控制台中抛出,因此路由器无法正常工作。

index.jsx

var React = require('react');
var ReactDOM = require('react-dom');
var Routes = require('./routes.jsx');


ReactDOM.render(Routes, document.querySelector('.container'));

routes.jsx

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var App = require('./components/app.jsx');
var Login = require('./components/login.jsx');

module.exports = (
  <Router>
    <Route path="/" component={Login}>
      <Route path="app/" component={App} />
    </Route>  
  </Router>
)

login.jsx

var React = require('react');
var UserStore = require('../stores/user-store.jsx');
var Router = require('react-router');
var Link = Router.Link;

module.exports = React.createClass({
    getInitialState: function() {
        return {
            userEmail: "",
            userPassword: ""     
        };
    },
    render: function() {
        return <div className="row panel panel-default">
          <div className="col-md-8 col-md-offset-2">
            <h2 className="text-center">
                To-Do-List-Login
            </h2>
                <div className="input-group">
                  <span>Email</span>
                    <input 
                        value={this.state.userEmail}
                        onChange={this.handleUserEmail} 
                        type="text" 
                        className="form-control" />
                  <span>Password</span>
                    <input 
                        value={this.state.userPassword}
                        onChange={this.handleUserPassword} 
                        type="text" 
                        className="form-control" />
                  <span className="input-group-btn">
                    <Link onClick={this.handleCreate} to="app/" className="navbar-brand">Create User</Link>
                    <Link onClick={this.handleLogin} to="app/" className="navbar-brand">Login</Link>
                  </span>
                </div>
              <hr />
              {this.props.children}
           </div>
         </div>

1 个答案:

答案 0 :(得分:0)

您使用的是过时版本的React Router。如果要使用最新的稳定版本,请使用v1.0.3。