Question

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

谁能告诉我哪里错了？

未捕获错误：不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：object。

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 - 之后，你可能会遇到像＃34; localhost：3000 /＃/？_ k = ckuvup＆＃34;这样的网址问题。所以，这样做：

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。

Answer 3

Router是1.0.0 API中的命名导出：

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

React-Router 1.0.0 Uncaught Error：Invariant Violation：元素类型无效

3 个答案: