CODEWITHSUNDEEP
reactjsreact-router
Giant Elk
Giant Elk

Reputation: 5685

Can't get latest react-router working

I upgraded to the latest ver 0.7.0 of react-router and can't get it working. I'm not sure if it's my Require statements, I copied them from one of the router examples.

I'm using: watchify --debug -t reactify ./app.jsx -o ./build/app-brow.j

Code below finds react via NPM modules when I remove react-router code:

I have these NPM modules locally. watchify is installed globally:

npm install react-router
npm install reactify
npm install react

app.jsx

/** @jsx React.DOM */

var React = require('react');

// React Router
var Router = require('react-router');
var Route = Router.Route;
var Routes = Router.Routes;
var Link = Router.Link;


var MyAboutView = React.createClass({
  render: function() {
    return (
      <div >
         My About
      </div>
    );
  }
});


var App = React.createClass({
   render: function() {
      return (
         <div>
            Main App

            <this.props.activeRouteHandler/>
         </div>
      );
  } 
}); 


React.renderComponent((
  <Routes>

    <Route path="/" handler={App}>
      <Route name="about" handler={myAboutView} />
    </Route>

  </Routes>
), document.body);

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Test Router</title

  </head>

  <body>
    Error, React / JS not loading.

    <script type="text/javascript" src="build/app-brow.js"></script>

  </body>
</html>

Upvotes: 1

Views: 3003

Answers (1)

Giant Elk
Giant Elk

Reputation: 5685

Silly me, it was a typo handler={myAboutView} should be handler={MyAboutView}, note the CAPs on MyAboutView.

Upvotes: 2

Related Questions