React-Router 1.0.0 Uncaught Error: Invariant Violation: Element type is invalid

Question

我在使用 react-router 时遇到以下错误:-

谁能告诉我哪里错了？

未捕获错误：不变违规：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：对象。

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

Router 是 1.0.0 API:

中的命名导出

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

Answer 2

以下行解决了我的错误

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

Answer 3

首先，抱歉我的英语不好。我遇到了同样的问题，几个小时后，解决方法是：

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

...并阅读 HERE 以了解为什么要这样做

完成所有这些事情后，例如，当您使用 gulp 服务器提供此服务时，可能会遇到一些麻烦。我建议看看here。

React-Router 1.0.0 Uncaught Error: Invariant Violation: Element type is invalid

React-Router 1.0.0 Uncaught Error: Invariant Violation: Element type is invalid

javascript

reactjs

react-router