Question

我在处理反应组件方面遇到了麻烦。我的问题已经在几个问题中通过stackoverflow得到了解答，但我无法解决他们的问题，这就是为什么我再次发布问题。

我的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'))

在我的App组件文件中，我试图处理所有这些路由这一行var RouteHandler = require("react-router").RouteHandler;

我在控制台中遇到2个错误

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

和

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

如果有人担心查看整个代码，那么它也会在github上https://github.com/ijunaid8088/react-sockets 谢谢你的帮助

Answer 1

您收到的错误源于您指定的使用此错误。据我所知，React-Router中没有这样的功能。

删除您在APP文件中使用它将解决这两个错误。

我猜你想要实现的是你的APP作为组件的容器，以及你的组件在每条路线上作为孩子出现。

建议的解决方案：

app-client.js中的

：

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

请注意，属性历史记录已设置为hashHistory（必须从React-Router获取。

上述JSX将使APP组件出现在根（＆＃34; /＆＃34;）路径上。为了使Audience组件出现在根路径上，我将组件设置为以便React-Router知道将其呈现为APP see Index Routes/ Index Links for more info的子组件。

当访问相关路径时，其他组件（扬声器和电路板）将代替受众。另请注意我如何为每条路线设置组件的属性，而不是 handler 。

现在，Audience，Speaker和Board组件连接成APP组件的子路由，我们可以转到下一个文件：

APP.js中的

：

3）确保呈现子路径

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

您可以使用以下方式引用要渲染的子路线：

{this.props.children}

React-Router根据路径路径处理传入的路径。

编辑：
您可以将项目设置为使用ES6导入和导出以及解构，因此需要的功能可以是写得像：
import React from 'react';
import ReactDOM from 'react-dom';
import {Router, IndexRoute, Route, hashHistory} from 'react-router';
...
etc.

使用反应组分REACTjs

1 个答案:

建议的解决方案：

：

：

3）确保呈现子路径