2017-01-02 76 views
0

我使用react-router定义了路由并访问了URL。
然后,发生错误“元素类型无效”。React.js - 元素类型无效

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 

RouterRoute不是不确定的。
你有什么想法解决它吗?

index.js

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> 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 

var Users = React.createClass({/*...*/}); 
var User = React.createClass({/*...*/}); 

var routes = (
    <Route name="app" path="app" handler={App}> 
     <Route name="users" path="users" handler={Users}> 
      <Route name="user" path="/user/:userId" handler={User} /> 
     </Route> 
    </Route> 
); 

ReactDOM.render(
    <Router>{routes}</Router>, document.getElementById('root') 
); 

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
</head> 
<body> 
    <div id="root"></div> 
    <script src="./public/bundle.js"></script> 
</body> 
</html> 

server.js

var express = require('express'); 
var app = express(); 
var http = require('http').Server(app); 

app.get('/app/*', function(req, res) { 
    res.sendFile(__dirname + '/index.html'); 
}); 
app.get('/public/bundle.js', function(req, res) { 
    res.sendFile(__dirname + '/public/bundle.js'); 
}); 

http.listen(3000, function() { 
    console.log('Server listen at port 3000'); 
}); 
+0

反应路由器您正在使用什么版本的更换? '处理程序'道具相当过时(v1之前)。假设你使用的是更新的版本,'handler'应该用'component'替换。 –

+0

谢谢。我修改了我的代码。 但仍然收到相同的错误消息。 –

+0

发生这种情况时,您尝试导航到的路径是什么?其中一个组件必须具有不良的返回值,但很难说没有看到更多的代码。 –

回答

0

我想你错过定义根路径。

<Route path="/" handler={App}> 
    <Route name="app" path="app" handler={App}> 
     <Route name="users" path="users" handler={Users}> 
      <Route name="user" path="/user/:userId" handler={User} /> 
     </Route> 
    </Route> 
</Route> 
相关问题