RanRag RanRag - 1 month ago 45
Node.js Question

Basic React Router Example not working

I have my basic react-router setup as below


  1. components.js -> Handling Components

  2. main.js -> -> Render the components via Routing

  3. index.ejs -> React/React-Router dependencies loaded via CDN

  4. build.js -> (browserified main.js) included as
    <script>



When I start my node express server & in browser open
localhost:4444
I get below warnings & error


react.js:20478 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).printWarning @
react.js:20478warning @ react.js:20502createElement @
react.js:109282../components @ build.js:68s @ build.js:1e @
build.js:1(anonymous function) @ build.js:1

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


components.js

var React = window.React;

const App = React.createClass({
render: function () {
return React.createElement(
"div",
null,
React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"Home"
),
React.createElement(
"li",
null,
"About"
),
React.createElement(
"li",
null,
"Contact"
)
),
this.props.children
);
}
});

exports.App = App;

const Home = React.createClass({
render: function () {
return React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"Home..."
)
);
}
});

exports.Home = Home;


main.js

var Router = window.ReactRouter;
var Link = Router.Link;
var Route = Router.Route;
var IndexRoute = Router.IndexRoute;
var ReactDOM = window.ReactDOM;
var History = window.History;

var App = require("./components").App;
var Home = require("./components").Home;

ReactDOM.render(React.createElement(
Router,
{ history: History.createBrowserHistory() },
React.createElement(
Route,
{ path: "/", component: App },
React.createElement(IndexRoute, { component: Home }),
React.createElement(Route, { path: "home", component: Home })
)
), document.getElementById('app'));


index.ejs

<html>
<head>
<title>React Isomorphic Server Side Rendering Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom-server.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/history/4.3.0/history.js"></script>
</head>
<body>
<h1 id="main-title">Isomorphic Server Side Rendering with React</h1>
<div id="app"></div>
<script type="text/javascript" src="/build.js"></script>
</body>
</html>


server.js

var express = require('express'),
path = require('path'),
app = express(),
port = 4444,
bodyParser = require('body-parser');

// Include static assets. Not advised for production
app.use(express.static(path.join(__dirname, 'public')));
// Set view path
app.set('views', path.join(__dirname, 'views'));
// set up ejs for templating. You can use whatever
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
res.render('index.ejs', {});
});

app.listen(port);
console.log('Server is Up and Running at Port : ' + port);


So, am not sure what I am doing wrong here.

PS : I am using JSX components and I have a custom gulp babel task to transform my JSX components to JS which than I use in my code.

babel --plugins transform-react-jsx --watch /myfolder/In /myfolder/Out

Answer

It seems that you are using the newest version of react-router which doesn't export Router and IndexRoute (it exports StaticRouter, MemoryRouter, BrowserRouter...). The 4.0.0 version of react-router is in Pre-release mode.

You can use latest stable version 2.8.1: https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.js which exports Router and IndexRoute.

Also your window.ReactRouter exports Route and Router

 ReactDOM.render(React.createElement(
          window.ReactRouter.Router,
          { history: History.createBrowserHistory() },
          React.createElement(
                  window.ReactRouter.Route,
                  { path: "/", component: App },
                  React.createElement(window.ReactRouter.IndexRoute, { component: Home }),
                  React.createElement(window.ReactRouter.Route, { path: "home", component: Home })
          )
  ), document.getElementById('app'));
Comments