Javascript 使用react组件REACTjs

我在处理react组件时遇到问题。我的问题已经在几个问题中得到了回答，但我无法解决我与他们的问题，这就是我再次发布问题的原因

我的app-client.js文件

var React = require("react");
var ReactDom = require("react-dom");
var Router = require("react-router");
var Route = Router.Route;
var DefaultRoute = require("react-router").DefaultRoute;

var APP = require("./components/APP");
var Audience = require("./components/Audience")
var Speaker = require("./components/Speaker")
var Board = require("./components/Board")

var routes = (
    <Route handler={APP}>
        <Route path="/" handler={Audience}></Route>
        <Route name="speaker" path="speaker" handler={Speaker}></Route>
        <Route name="board" path="board" handler={Board}></Route>
    </Route>
);

ReactDom.render(<Router>{routes}</Router>, document.getElementById('react-container')) 

及

如果有人关心整个代码，那么它也在github上

---

感谢您的帮助

您收到的错误源于您指定的使用方法。据我所知，React路由器中没有这样的功能

在应用程序文件中删除对它的使用将修复这两个错误。

我猜您希望实现的是将您的应用程序作为组件的容器，并使您的组件在每条路线上显示为子组件

---

建议的解决办法： 在app-client.js中： React路由器根据路由路径处理传入的路由

编辑：
您可以将您的项目设置为使用ES6导入和导出以及分解结构，以便可以使用所需的函数 写得像：

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, IndexRoute, Route, hashHistory} from 'react-router';
...
etc.

---

我做了您建议的更改，得到的错误为bundle.js:1302警告：React.createElement:type不应为null、未定义、布尔或数字。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。printWarning@bundle.js:1302 bundle.js:866未捕获不变冲突：元素类型无效：应该是一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：object。我注意到我最初的措辞方式是不正确的。现在仍然使用var routesso环绕步骤（2）？你有什么建议？您可以克隆repo并进行更改以使其工作吗？请参阅我对步骤2的补充，您仍然应该设置到新JSX的路由，而不是发出该步骤。否则，JSXIt的require函数将无效。我通常使用ES6，因此尝试在步骤1中重新编写它们，请再看一看。新的设置肯定会起作用。

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

var React = require("react");
var ReactDom = require("react-dom");
var Router = require("react-router").Router;
var Route = require("react-router").Route;
var IndexRoute = require("react-router").IndexRoute;
var hashHistory = require("react-router").hashHistory;

var APP = require("./components/APP");
var Audience = require("./components/Audience")
var Speaker = require("./components/Speaker")
var Board = require("./components/Board")

ReactDom.render(
    <Router history={ hashHistory } >
        <Route path="/" component={ APP }>
            <IndexRoute component={ Audience}/>
            <Route name="speaker" path="speaker" component={Speaker}></Route>
            <Route name="board" path="board" component={Board}></Route>
        </Route>
    </Router>,
    document.getElementById('react-container')
);

render() {
  return (
    <div>
      <Header title={this.state.title} status={this.state.status}/>
      {this.props.children}
    </div>
  );
}

{this.props.children}

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, IndexRoute, Route, hashHistory} from 'react-router';
...
etc.