React.js - 元素类型无效答案

【问题标题】：React.js - Element type is invalidReact.js - 元素类型无效
【发布时间】：2017-05-16 21:23:21
【问题描述】：

我使用react-router 定义了路由并访问了 URL。
然后，出现错误“元素类型无效”。

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

Router 和 Route 不是未定义的。
你有什么解决办法吗？

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

【问题讨论】：

你使用的是什么版本的 React Router？ handler 道具已经过时了（pre v1）。假设您使用的是更新版本，handler 应替换为 component。
谢谢。我修改了我的代码。但仍然收到相同的错误消息。
发生这种情况时您尝试导航到的路径是什么？您的某个组件必须有一个错误的返回值，但如果没有看到更多代码，就很难说是哪个。
去掉路径'/user/:userId'前面的'/'。应该是
谢谢！但还是报错。（我开始认为这个错误是由于 server.js 上的 app.get() 引起的）

标签： javascript node.js reactjs express react-router

【解决方案1】：

我认为你错过了定义根路由。

替换它

<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>

【讨论】：