ijunaidfarooq ijunaidfarooq - 1 month ago 17
Javascript Question

working with react components REACTjs

I am having a trouble in dealing with react components. My problem is already been answered over stackoverflow in several question but am unable to resolve my problem with them thats why I am posting question again.

my app-client.js file

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


And in my App component file I am trying to deal all those routes with
this line
var RouteHandler = require("react-router").RouteHandler;


And I am having 2 error in console as

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


and

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


If anyone is concerned in look the whole code then its on github as well https://github.com/ijunaid8088/react-sockets
Thanks for any help

Answer

The errors you are receiving stem from the use of this that you have specified. As far as I'm aware, there is no such feature within React-Router.

Removing your use of it in your APP file will fix these 2 errors.

What I'm guessing you want to achieve is for the your APP to be the container the component and for your components to appear as children when on each Route.


Suggested solution:

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

Notice a property history has been set to hashHistory (which has to be required from React-Router.

The above JSX will make the APP component appear on the root ("/") path. In order to make the Audience component appear on the root path, I've set the component to so that React-Router knows to render it as a child of APP see Index Routes/ Index Links for more info. The other components (Speaker and Board) will appear in place of Audience when their relevant paths are visited.

The Audience, Speaker and Board components are now wired up to be child Routes of the APP component.

within APP.js: ------------------------------------------------------------------------

3) Ensure child routes are rendered

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

You can reference which child routes to render using:

{this.props.children}

React-Router handles which ones are passed in depending on route path.

EDIT:
You could set up your project to use ES6 imports and exports as well as destructuring so the require functions could be written like:

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