2017-01-02 106 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> 
相關問題