React-Router 1.0.0未捕获的错误：始终违反：元素类型无效

Question

使用react-router时出现以下错误：-

谁能告诉我我错了吗？

未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。

var React = require('react');
var ReactDOM  = require('react-dom');
var Router = require('react-router');
var Route = Router.Route;


var App = React.createClass({
  render: function(){
    return (
  <div>
  <h1>Welcome</h1>
    {this.props.children}
  </div>
);
}
});

var Login = React.createClass({
  render: function(){
    return (    
      <div className="large-3 medium-6 large-centered medium-centered columns"> 
        <h1>Login Page</h1>
      </div>

  ) }
});

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>      
    </Route>
  </Router>
   ), document.getElementById('content'));

Answer 1

以下几行解决了我的错误

var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

Answer 2

首先，对不起我的英语不好。 我遇到了同样的问题，几个小时后，该如何解决：

1-您应该导入正确的模块，例如Saroj说：

var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;

2-之后，URL可能会出现问题，例如“ localhost：3000 /＃/？_ k = ckuvup”。 因此，请执行以下操作：

npm install history --save

...然后

var createBrowserHistory = require('history/lib/createBrowserHistory');

并为此更改路由器配置：

ReactDOM.render((
  <Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>      
    </Route>
  </Router>
), document.getElementById('content'));

...并在这里阅读以了解为什么这样做

完成所有这些操作后，例如在使用gulp服务器提供服务时，可能会遇到麻烦。 我建议在这里看看。

Answer 3

Router是1.0.0 API中的命名导出：

var {Router, Route} = require('react-router')