Getting Parse Error <this.props.activeRouteHandler/>

All we need is an easy explanation of the problem, so here it is.

Know how to get react-router working with ReactJS?

It’s throwing errors in browser console for me. My code is below. I installed npm react-router and using a basic server i.e. python -m SimpleHTTPServer 3000 which works fine for React app that doesn’t have the Router code.

Error in console is Uncaught Error: Parse Error: Line 18: Unexpected token .
<this.props.activeRouteHandler/>

I think its that my app.js can’t find the react-router module, but maybe a RequireJS issue (I include it from a CDN in my index) ???

Directories
/index.html
/scripts/app.js
/node_modules/react-router

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="https://fb.me/react-0.10.0.js"></script>
    <script src="https://fb.me/JSXTransformer-0.10.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>

  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx" src="scripts/app.js"></script>

  </body>
</html>

app.js

/** @jsx React.DOM */

var Routes = require('../node_modules/react-router/modules/main').Routes;
var Route = require('../node_modules/react-router/modules/main').Route;
var Link = require('../node_modules/react-router/modules/main').Link;

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

var Users = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Users</h2>
        <this.props.activeRouteHandler/>
      </div>
    );
  }
});

var User = React.createClass({
  render: function() {
    return <div>{this.props.params.userId}</div>
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div>
        <ul>
          <li><Link to="about">About</Link></li>
          <li><Link to="users">Users</Link></li>
          <li><Link to="user" userId="123">User 123</Link></li>
        </ul>
        <this.props.activeRouteHandler/>
      </div>
    );
  }
});

React.renderComponent((
  <Routes>
    <Route handler={App}>
      <Route name="about" handler={About}/>
      <Route name="users" handler={Users}>
        <Route name="user" path="/user/:userId" handler={User}/>
      </Route>
    </Route>
  </Routes>
), document.body);

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I had the same problem when I upgraded to react-router 0.5 and I was even using react 0.11. I changed to {this.props.activeRouteHandler()} and it started working. I marked this as a “todo” to look into though.

No matter what you do, don’t give up. It works great! We were using backbone router before and this react router is such a blessing compared to our old setup!

Also with your directory setup you can change your requires to just “require(‘react’)” and use browserify to build your app and required dependencies into a single js asset. Everything else looks good.

Method 2

Namespace support in JSX was introduced in React 0.11.0. You have 0.10.0. Change the script tags to use 0.11.0.

<script src="https://fb.me/react-0.11.0.js"></script>
<script src="https://fb.me/JSXTransformer-0.11.0.js"></script>

With the 0.10.0 and below you would have done this:

var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply